React Native Book List App
This is a sample application that makes use of reanimateed, shared elements transitions and lottie to deliver a smooth native experience with delightlful animations.
Goals
- Find and save books in list
- Native app experience
- UI thread 60 fps animations
- Shared element transtions
- Flatlist animations
- Drag to navigate / close (AppStore stlye)
- Reanimated 2 support
- Integrated Lottie animations
- Haptics for nagivation
- Expo without ejecting
- Global themeing with light & dark modes
- AsyncStorage for lists
- Clean code with ES Lint
- iOS + Android support
Code Structure
There are 3 main screens: list screen, search screen and book details. There's a fun intro / welcome screen with lottie animations as well.
Important Code:
src/screens/...jsx
App Screens
src/components/...jsx
Reusable Components
src/anims/...json
Lotties Animations
src/theme.js
Themes for light and dark
src/RootNavigator.jsx
App navigation
Dependencies
I wanted to keep the dependencies outside of React Native & Expo to a minimum. The app relies on the following libraries as core, others you see in package.json are optional.
react-navigation
expo-haptics (remove if you don't want haptics)
lottie-react-native (remove if you don't need lottie)
react-native-reanimated
react-native-shared-element
react-navigation-shared-element
Reference Material
Reanimated 2
https://docs.swmansion.com/react-native-reanimated/docs
Shared Element Navigation
https://github.com/IjzerenHein/react-navigation-shared-element/blob/navigation-v5/README.md
Lottie Animations
https://github.com/lottie-react-native/lottie-react-native
Android
If you're running into issues with Android please make sure to check that reanimated and shared navigation element (v5) are installed properly with the right versions and Layout Animations have been enabled.
React Native Community
Was this helpful? Want to see more code like this? Would you like this as an template? Just want share your thoughts? Catch me at @himanshuchauu.