react-native-animation-samples
react-native-animation-samples copied to clipboard
Gesture based interruptible animation samples in React Native.
React Native Animation Samples
Some very interesting and challenging animation samples built in react-native
🧬 Samples
| Project | |
|---|---|
| > Expo Snack > YouTube Tutorial Playlist |
|
1. Custom Toolbar> YouTube TutorialA Custom playful, interactive toolbar with cool gesture based interruptible animations. > Browse > Demo: twitter | youtube short 1, short 2 |
![]() |
2. Color Swatch> YouTube TutorialA Color Swatch that plays a circular rotation based on user gestures. > Browse > Demo: twitter | youtube |
![]() |
3. Grid MagnificationA grid list view that displays Magnify effect on long press & drag, focusing on the items near the touch area within a radius.> Browse > Demo: twitter > Alternatives: Flutter |
![]() |
4. Rope PhysicsA realistic looking gesture controlled, bezier based Rope UI implementation and related samples.> Browse > Demo: twitter |
![]() |
5. Custom Cursor/CaretA Customizable custom cursor/caret for TextFields, with intuitive validation animations for max length and password strength.> Browse > Demo: twitter (max length | password strength) > Alternatives: Flutter |
![]() |
🧬 Other samples (Incomplete) 🚧
- Cards Swap:- A drag/swipe demo where the cards dodge each other with gesture based animations. See preview
🖥 Running locally
# after clone, cd into the directory
# install dependencies
yarn install
# iOS only
npx pod-install ios
# or
cd ios && pod install && cd ..
# Run iOS
npx react-native run-ios
# Run Android
npx react-native run-android




