Bottom Tab Navigator - Copy this React, Tailwind Component to your project

import React, { useState } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import * as Animatable from 'react-native-animatable'; import AdminHomeScreen from '../screen/admin/AdminHomeScreen'; import AccountScreen from '../screen/AccountScreen'; import CartScreen from '../screen/CartScreen'; import NotificationScreen from '../screen/NotificationScreen'; import Icon from 'react-native-vector-icons/Feather'; import TestScreen from '../screen/TestScreen'; import homeIconAnimation from '../assets/animation/home.json'; import bellIconAnimation from '../assets/animation/bellnotification.json'; import accountIconAnimation from '../assets/animation/accountIcon.json'; import cartIconAnimation from '../assets/animation/cartIconAnimation.json'; import LottieView from 'lottie-react-native'; const Tab = createBottomTabNavigator(); const AnimatedTabIcon = ({ name, focused, badgeCount, routeName }) => { const animation = focused ? 'bounceIn' : 'fadeInUp'; const iconSize = focused ? 30 : 24; const iconColor = focused ? '#EE4D2D' : '#fff'; const backgroundColor = focused ? '#ffbe77' : 'transparent'; const badgeBackgroundColor = focused ? 'red' : '#fff'; const badgeTextColor = focused ? '#fff' : 'red'; let animationSource; let lottieStyle = { width: 60, height: 70 }; if (routeName === 'Trang chủ') { animationSource = homeIconAnimation; } else if (routeName === 'Thông báo') { animationSource = bellIconAnimation; lottieStyle = { width: 60, height: 70 }; } else if (routeName === 'Giỏ hàng') { animationSource = cartIconAnimation; lottieStyle = { width: 50, height: 50 }; } else if (routeName === 'Tài khoản') { animationSource = accountIconAnimation; lottieStyle = { width: 40, height: 40 }; } return ( <View style={{ alignItems: 'center', justifyContent: 'center' }}> {animationSource && focused ? ( <Animatable.View animation={animation} duration={200} style={{ alignItems: 'center', justifyContent: 'center', width: 60, height: 60, borderRadius: 30, backgroundColor, marginBottom: 20, }} > {/* Lottie Animation */} <LottieView source={animationSource} autoPlay loop style={lottieStyle} /> {badgeCount > 0 && ( <View style={[styles.badgeContainer, { backgroundColor: badgeBackgroundColor }]}> <Text style={[styles.badgeText, { color: badgeTextColor }]}>{badgeCount}</Text> </View> )} </Animatable.View> ) : ( <Animatable.View animation={animation} duration={200} style={{ alignItems: 'center', justifyContent: 'center', width: 60, height: 60, borderRadius: 30, backgroundColor, marginBottom: focused ? 20 : 0, }} > {/* Feather Icon */} <Icon name={name} size={iconSize} color={iconColor} /> {badgeCount > 0 && ( <View style={[styles.badgeContainer, { backgroundColor: badgeBackgroundColor }]}> <Text style={[styles.badgeText, { color: badgeTextColor }]}>{badgeCount}</Text> </View> )} </Animatable.View> )} </View> ); }; const HomeTab = () => { const [cartItemCount, setCartItemCount] = useState(0); const [bellItemCount, setBellItemCount] = useState(0); return ( <Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ focused }) => { let iconName; let badgeCount = 0; switch (route.name) { case 'Trang chủ': iconName = 'home'; break; case 'Giỏ hàng': iconName = 'shopping-cart'; badgeCount = cartItemCount; break; case 'Thông báo': iconName = 'bell'; badgeCount = bellItemCount; break; case 'Tài khoản': iconName = 'user'; break; default: iconName = 'home'; } return ( <View style={{ justifyContent: 'center', alignItems: 'center' }}> <AnimatedTabIcon name={iconName} focused={focused} badgeCount={badgeCount} routeName={route.name} /> </View> ); }, tabBarLabel: ({ focused }) => ( <Text style={{ color: focused ? '#fff' : '#fff', fontSize: 12 }}> {route.name} </Text> ), tabBarStyle: { height: 70, backgroundColor: '#EE4D2D', position: 'absolute', bottom: 10, right: 10, left: 10, borderRadius: 20, borderTopWidth: 0, elevation: 10, }, headerShown: false, })} > <Tab.Screen name="Trang chủ" component={AdminHomeScreen} /> <Tab.Screen name="Giỏ hàng" children={() => <CartScreen setCartItemCount={setCartItemCount} />} /> <Tab.Screen name="Thông báo" children={() => <NotificationScreen setBellItemCount={setBellItemCount} />} /> <Tab.Screen name="Tài khoản" component={AccountScreen} /> <Tab.Screen name="Thử" component={TestScreen} /> </Tab.Navigator> ); }; const styles = StyleSheet.create({ badgeContainer: { position: 'absolute', right: -6, top: -3, borderRadius: 10, width: 20, height: 20, justifyContent: 'center', alignItems: 'center', }, badgeText: { fontSize: 12, fontWeight: 'bold', }, }); export default HomeTab;