Skip to content

React native animated ui components made with styled components, React native reanimated, NO more library hell

License

Notifications You must be signed in to change notification settings

waleedcj/nativeMotion

Repository files navigation

Native Motion

License: MIT

Elevate your React Native applications with Native Motion – a curated collection of beautifully designed, production-ready, and performant animated UI components.

Native Motion provides developers with a growing library of lightweight UI elements that can be easily integrated into any React Native project. Our focus is on delivering a seamless copy-paste experience, allowing you to build stunning interfaces without the usual overhead, powered by modern animation techniques.

Explore the Components & Documentation: nativemotion.dev

✨ Key Features

  • Copy & Paste Simplicity: Effortlessly integrate components directly into your projects.
  • Performance First: Built with React Native Reanimated 3 for smooth, native-thread animations (aiming for 60 FPS).
  • Modern & Aesthetic: Professionally designed components to enhance the look and feel of your applications.
  • Lightweight: No unnecessary bloat, ensuring optimal app performance and bundle sizes.
  • Developer Focused: Created by developers, for developers, with a focus on practical use cases and ease of implementation.
  • Growing Library: We are committed to regularly adding new and innovative animated components.
  • Well-Documented: Clear instructions, examples, and prop details for each component are provided on our documentation site.
  • Open Source: Freedom to use, inspect, modify, and contribute.

🚀 How to Use Native Motion Components

Native Motion is designed to be incredibly straightforward for developers:

  1. Browse the Documentation: Visit our official documentation site at nativemotion.dev Here you can explore:
    • Live previews of each component.
    • Detailed usage instructions and code snippets.
    • Information on available props for customization.
    • Any necessary installation prerequisites (e.g., peer dependencies like react-native-reanimated).
  2. Select a Component: Identify the component that fits your needs.
  3. Copy the Code: Each component's documentation page will provide the relevant code snippet.
  4. Paste into Your Project: Integrate the copied code into your React Native application's codebase.
  5. Install Dependencies: Ensure any peer dependencies mentioned in the component's documentation (like react-native-reanimated, react-native-gesture-handler) are installed in your project.
  6. Customize: Adapt the component using its props to match your application's theme and requirements.

The documentation site is the primary resource for understanding how to utilize each component effectively.

🛠️ Technology

While the components are for React Native, the Native Motion documentation site itself is built with:

  • Next.js: For a fast and modern documentation experience.
  • Tailwind CSS: For styling the documentation.
  • MDX: For rich and interactive component documentation.
  • TypeScript: For robust and maintainable code.

Our React Native components are primarily built using:

  • React Native
  • React Native Reanimated 3
  • React Native Gesture Handler
  • Designed with compatibility for both Expo and standard React Native CLI projects in mind.

🤝 Contributing

We welcome contributions to Native Motion! Whether it's reporting a bug, suggesting a new component, improving documentation, or submitting a Pull Request, your help is greatly appreciated. Our goal is to build a high-quality, community-driven resource.

How to Contribute:

  • Report Bugs or Request Features: Please use the GitHub Issues tab.
  • Code Contributions:
    1. Please read our CONTRIBUTING.md (this file will need to be created) for details on our code of conduct, development setup, and the process for submitting pull requests.
    2. Fork the repository.
    3. Create your feature branch (git checkout -b feature/NewAwesomeComponent).
    4. Make your changes and commit them (git commit -m 'Add: NewAwesomeComponent with X functionality').
    5. Push to your branch (git push origin feature/NewAwesomeComponent).
    6. Open a Pull Request against our main (or develop) branch for review.
  • Documentation Improvements: Suggestions or PRs for improving the documentation are always welcome!

📜 License

This project is licensed under the MIT License - see the LICENSE.md file for details.


We hope Native Motion helps you build beautiful and engaging React Native applications faster!

About

React native animated ui components made with styled components, React native reanimated, NO more library hell

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published