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://svg2jsx.com/

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:

https://lottiefiles.com/

Normal:

https://iconify.design/

// Design Programms ————————————————————————————————————————————

Programm used for designing SVGs:

https://www.figma.com/

Programm used for Lottie Animations:

https://www.haikuanimator.com/