Custom Tab Bar for React Native using Reanimated 2 and Lottie Animations
// Github Repository ————————————————————————————————————————————
https://github.com/MaximilianDietel03/react-native-custom-tab-bar
// Docs ————————————————————————————————————————————
Links to all of the packages documentations:
https://reactnavigation.org/docs/getting-started/
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
https://github.com/lottie-react-native/lottie-react-native
https://github.com/react-native-svg/react-native-svg
// 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 ————————————————————————————————————————————
Google Drive with active-background.svg and Animated Icons:
https://drive.google.com/drive/folders/1sdJAOsepk3QlZ4zH3m26GEgyHPTVNJsL?usp=sharing
// SVG transformation ————————————————————————————————————————————
Sites used to transform SVG file into React SVG Component:
https://react-svgr.com/playground/?native=true
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:
https://stackoverflow.com/questions/38830568/how-to-show-svg-file-on-react-native
// Icons ————————————————————————————————————————————
Animated:
Normal:
// Design Programms ————————————————————————————————————————————
Programm used for designing SVGs:
Programm used for Lottie Animations: