aashu-dubey / react-native-animation-samples Goto Github PK

View Code? Open in Web Editor NEW

Gesture based interruptible animation samples in React Native.

License: MIT License

JavaScript 0.70% TypeScript 91.45% Ruby 1.38% Java 4.44% Objective-C 1.36% Objective-C++ 0.67%

react-native-animation-samples's Introduction

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 Tutorial A Custom playful, interactive toolbar with cool gesture based interruptible animations. > Browse > Demo: twitter \| youtube short 1, short 2
2. Color Swatch > YouTube Tutorial A Color Swatch that plays a circular rotation based on user gestures. > Browse > Demo: twitter \| youtube
3. Grid Magnification A 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 Physics A realistic looking gesture controlled, bezier based Rope UI implementation and related samples. > Browse > Demo: twitter
5. Custom Cursor/Caret A 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

react-native-animation-samples's People