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
- 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.
Native Motion is designed to be incredibly straightforward for developers:
- 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
).
- Select a Component: Identify the component that fits your needs.
- Copy the Code: Each component's documentation page will provide the relevant code snippet.
- Paste into Your Project: Integrate the copied code into your React Native application's codebase.
- 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. - 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.
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.
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:
- 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. - Fork the repository.
- Create your feature branch (
git checkout -b feature/NewAwesomeComponent
). - Make your changes and commit them (
git commit -m 'Add: NewAwesomeComponent with X functionality'
). - Push to your branch (
git push origin feature/NewAwesomeComponent
). - Open a Pull Request against our
main
(ordevelop
) branch for review.
- Please read our
- Documentation Improvements: Suggestions or PRs for improving the documentation are always welcome!
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!