How to make bottom tab bar in react native

Question

Here i'm sending the image of my bottom tab navigation. How to create this kind of bottom tab navigation in react native.

enter image description here

My code is like this...

<BottomTab.Navigator
   initialRouteName={Constants.EMPTY_SCREEN}
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   screenOptions={({navigation, route}) => ({})}>
   <BottomTab.Screen
      name={Constants.HOME_SCREEN}
      component={EmptyScreen}
      options={{
         tabBarLabel: 'Home',
         headerShown: false,
         tabBarActiveTintColor: Theme.colors.tabBarColor1,
         tabBarInactiveTintColor: Theme.colors.tabBarColor2,
         tabBarStyle: {
             paddingBottom: RFValue(8), height: RFValue(50)
         },
         tabBarLabelStyle: {
             fontFamily: Theme.fontFamily.fontPoppinsMedium,
             fontSize: Theme.fontSize.size10,
         },
         tabBarIcon: ({focused}) => {
           return (
             <Image
               style={{height: RFValue(20), width: RFValue(20)}}
               source={ focused ? ic_eye_on : ic_eye_off }
             />
           );
         },
       }}
    />
</BottomTab.Navigator>