This project showcases a collection of custom animations developed for React Native applications, leveraging the power of React Native Reanimated, Moti, and Gesture Handler. React Native, a robust framework for building mobile applications, offers extensive capabilities for crafting engaging and fluid animations. The integration of React Native Reanimated and Moti enhances the animation experience with more control and smoother transitions, while Gesture Handler improves user interaction with responsive gestures. This repository demonstrates how to overcome the complexities of mobile performance and animation APIs to create visually stunning and high-performance animations for React Native apps.
Bank UI: Animate transitions and interactions in a banking app. Dribble Inspiration
Banking Slider: A slider animation tailored for banking applications. Dribble Inspiration
Beat: A Beat Shopping Experience UI Dribble Inspiration
Behance Style Login: A login animation inspired by Behance's sleek design. Dribble Inspiration
Colorful Cards: Animated cards with vibrant colors and transitions. Dribble Inspiration
Custom Bottom Sheet: An interactive bottom sheet with custom animations. Dribble Inspiration
Custom Carousel: A carousel component with custom animations. Dribble Inspiration
Custom Section List: An animated section list for better user engagement.
Instagram Story Animation: Capturing the essence of Instagram's story animations.
Menu Transition: A menu that transitions with a unique animation. Dribble Inspiration
Smart Room Control: Animations for a smart room control app.
Spending Insights: Visual animations to represent spending habits. Dribble Inspiration
Stacked Card: Animated Stacked Card piled up.
Sticky Tab Scroll: A tab view that sticks at the top of the screen as you scroll. Dribble Inspiration
Streak Animation: Visualize streaks in a fun and engaging way. Dribble Inspiration
Todo Check Off Animations for checking Todos. Dribble Inspiration
Ticker Component: A simple yet effective ticker animation.
Theme Selector: A Custom Animated Theme Selector.
Waze Animation: Recreating Waze's delightful animation patterns. Desing Inspiration
To get started with this project, clone the repository to your local machine:
git clone https://github.com/Biki-das/Custom-React-Native.gitcd Custom-React-Nativenpm installTo ensure that all native dependencies are properly installed for iOS, you need to run pod install in the iOS directory of your React Native project. This step is crucial for linking any native modules that are included in your project.
After running npm install to install your project's dependencies, navigate to the iOS directory and run pod install:
cd ios
pod install
cd ..
npm run ios