Build a clone of the iOS 18 Photos app using React Native, Expo, and Reanimated in this comprehensive tutorial. Learn to create stunning animations and user interactions while exploring powerful tools for mobile development. Follow step-by-step instructions to set up the project, implement UI components, add animations with Reanimated, and manage state with hooks. Cover topics including project initialization, FlatList implementation, carousel creation, Expo Router setup, zoom animations, gesture handling, and seamless scrolling between different modes. Gain practical experience in mobile app development and enhance your skills in React Native, whether you're a beginner or looking to expand your knowledge.
Overview
Syllabus
Intro and Project Overview
Initialising a brand new Expo Project
Displaying a FlatList of Images
Implementing the Carousel of Images
Implementing the Header Carousel
Adding the Carousel Indicators
Setting Expo Router and Adding the Photo Screen
Implementing Reanimated and Adding Zoom-in animation
Adding the Pinch to Zoom Gesture animation
Go Back when Zooming out functionality
Tracking the Page Scroll Position
3 Scroll Modes: ScrollView, Gesture, Flatlist
Implementing Seamless Scroll from Page to Gesture
Taught by
notJust․dev
