Create magical move transitions between scenes in React Native with animated component morphing.
react-native-magic-move is a React Native library that enables smooth, animated transitions between scenes by morphing components with matching IDs. It creates the illusion of elements moving and transforming across screens, enhancing user experience with visually appealing navigation effects. The library focuses on creating magical illusions of component transitions without actually moving elements between scenes.
React Native developers building mobile or web applications who want to implement polished, animated transitions between screens or scenes. It is particularly useful for developers using Expo or react-native-web who need a solution that works without native extensions.
Developers choose react-native-magic-move for its ability to create seamless shared element transitions with multiple effect types (move, morph, dissolve, flip, etc.) without requiring native extensions, making it compatible with Expo and react-native-web. It offers flexible integration with custom components and react-navigation, though new users are advised to consider its successor, react-native-shared-element, for native performance.
Create magical move transitions between scenes in react-native 🐰🎩✨
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Works without native extensions, supporting Expo and react-native-web environments, as noted in the installation section for non-ejected projects.
Offers multiple built-in transitions like move, morph, dissolve, and exotic types such as flip and shrinkAndGrow, which are not available in the successor.
Enables integration with custom components via createMagicMoveComponent, allowing animations with libraries like FastImage, as detailed in the documentation.
Has a dedicated binding for react-navigation through react-navigation-magic-move, facilitating seamless animated transitions in navigation stacks.
Relies on the React Native bridge for animations, which the README admits is less performant than the all-native successor, react-native-shared-element.
No new features are being added, with only critical bug fixes remaining, making it a legacy option compared to actively maintained alternatives.
Achieving best performance requires installing native extensions, which can be tricky and is highlighted in a separate manual installation guide.