Skip to content

Aashu-Dubey/react-native-animation-samples

Repository files navigation

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
Animated Toolbar Preview

2. Color Swatch

> YouTube Tutorial

A Color Swatch that plays a circular rotation based on user gestures.

> Browse
> Demo: twitter | youtube
Color Swatch Preview

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
Grid Magnification Preview

4. Rope Physics

A realistic looking gesture controlled, bezier based Rope UI implementation and related samples.

> Browse
> Demo: twitter
Rope Physics Preview

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
Custom Cursor/Caret Preview

🧬 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