React Native | React Navigation | Reanimated 2 | Lottie | Custom Animated Tab Bar
Learn how to build a Custom Animated Tab Bar with React Navigation, Reanimated 2 and Lottie in React Native in 10 minutes.
// Github Repository ------------------------------------------
github.com/MaximilianDietel03...
// Docs ------------------------------------------
Links to all of the packages documentations:
reactnavigation.org/docs/gett...
docs.swmansion.com/react-nati...
github.com/lottie-react-nativ...
github.com/react-native-svg/r...
// Commands ------------------------------------------
Initialise new React Native project, Typescript:
npx react-native init AwesomeTSProject --template react-native-template-typescript
Note: React Native version 0.69.4 at the time I uploaded this video
//
Install required packages:
yarn add @react-navigation/native @react-navigation/bottom-tabs react-native-safe-area-context react-native-screens react-native-svg react-native-reanimated lottie-react-native
//
If your using iOS:
npx pod-install ios
// Assets ------------------------------------------
iCloud Drive with active-background.svg and animated Icons:
www.icloud.com/iclouddrive/03...
// SVG transformation ------------------------------------------
Sites used to transform SVG file into React SVG Component:
svg2jsx.com/
react-svgr.com/playground/?na...
Note: If you wanna transform a lot of SVG files in your project, you might wan’t to take a look at this stack overflow article:
stackoverflow.com/questions/3...
// Icons ------------------------------------------
Animated:
lottiefiles.com/
Normal:
iconify.design/
// Design Programms ------------------------------------------
Programm used for designing SVGs:
www.figma.com/
Programm used for Lottie Animations:
www.haikuanimator.com/
24 авг 2022