nfaycel / react-native-animation

React Native Animation

This repository is a collection of results from the React Native Animation Tutorial on my YouTube Channel Rakha Wibowo using :

• React Native
• Reanimated
• React Native Gesture Handler
• React Native Skia
• React Three Fiber
• Moti
• Lottie
• D3

This project uses react-native-bars to make the Status Bar and Navigation Bar on Android transparent

Version

The version used in this repository:

• React Native v0.73.7
• Reanimated v3.10.0
• React Native Gesture Handler v2.16.0
• Moti v0.28.1
• Lottie v6.7.2
• React Three Fiber v8.16.3
• React Three Drei v9.105.6
• Three.js v0.164.1
• Skia v1.2.3
• D3 v7.9.0
• React Native Bars v2.4.3

Available Tutorials

• React Native Custom Switch Using Reanimated 2
• React Native Custom Animated Check Box Component Using SVG and Reanimated 2
• React Native Custom Image Carousel with Pagination and Auto Play using Reanimated 2
• React Native Bottom Sheet with Back Drop from Scratch using Reanimated 2 and Gesture Handler
• React Native Custom Range Slider using Reanimated 2
• React Native FlatList Grid or FlatList Columns With Reveal Animation Using Moti
• React Native Onboarding Screen Using Reanimated 2
• React Native Custom Swipeable Toast From Scratch
• React Native Stack Carousel
• React Native Accordion
• React Native Floating Action Button
• React Native Onboarding Screen ( Change Color ) Using Reanimated
• React Native 3D Onboarding Screen Using Reanimated and React Three Fiber
• React Native Scrollable Bottom Sheet with Back Drop using Reanimated and Gesture Handler
• React Native 3D Loading 3D Model Using React Three Fiber and Drei
• React Native 3D Character With Animation
• React Native Shared Element Transition With Reanimated 3
• React Native Custom Drawer With Reanimated 3 and Gesture Handler From Scratch
• React Native Animated Donut Chart using Reanimated 3 and Skia
• React Native Animated Circular Progress Bar With Reanimated 3 and Skia
• React Native Onboarding Screen (Masking) With Reanimated 3 and Skia
• React Native 3D Shop App UI With React Three Fiber - ThreeJs
• React Native Carousel With Pagination, Auto Play and Infinite Loop
• React Native Dark Mode Switch
• React Native Animated Onboarding Screen (Inspired By Cuberto)
• React Native Card Swipe With Reanimated And Gesture Handler From Scratch
• React Native Bar Chart With Skia And Reanimated From Scratch
• React Native Custom Carousel with Reanimated 3
• React Native Line Chart With Reanimated 3, Skia and D3 From Scratch!!!
• React Native Dark Mode Curtain Effect Animation With Reanimated and Skia

Run Locally

Clone the project

git clone https://github.com/Rakha112/react-native-animation.git

Go to the project directory

cd react-native-animation

Install dependencies

npm install

For iOS

npx pod-install

Start the server

npm start -- --reset-cache

Run on IOS

npx react-native run-ios

Run on ANDROID

npx react-native run-android

The app