React Native | Custom Animated Tab Bar | React Navigation | Reanimated 2 | Lottie
32.4 هزار بار بازدید -
2 سال پیش
-
React Native | React Navigation
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 ——————————————————————————————————————————
https://github.com/MaximilianDietel03...
// Docs —————————————————————————————————————————-
Links to all of the packages documentations:
https://reactnavigation.org/docs/gett...
https://docs.swmansion.com/react-nati...
https://github.com/lottie-react-nativ...
https://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 ——————————————————————————————————————————
Google Drive with active-background.svg and animated Icons:
https://drive.google.com/drive/folder...
// SVG transformation ——————————————————————————————————————————
Sites used to transform SVG file into React SVG Component:
https://svg2jsx.com/
https://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:
https://stackoverflow.com/questions/3...
// 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/
Learn how to build a Custom Animated Tab Bar with React Navigation, Reanimated 2 and Lottie in React Native in 10 minutes.
// Github Repository ——————————————————————————————————————————
https://github.com/MaximilianDietel03...
// Docs —————————————————————————————————————————-
Links to all of the packages documentations:
https://reactnavigation.org/docs/gett...
https://docs.swmansion.com/react-nati...
https://github.com/lottie-react-nativ...
https://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 ——————————————————————————————————————————
Google Drive with active-background.svg and animated Icons:
https://drive.google.com/drive/folder...
// SVG transformation ——————————————————————————————————————————
Sites used to transform SVG file into React SVG Component:
https://svg2jsx.com/
https://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:
https://stackoverflow.com/questions/3...
// 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/
2 سال پیش
در تاریخ 1401/06/03 منتشر شده
است.
32,431
بـار بازدید شده