0

Expected Output Expected Output

Actual Output Actual Output

I need top tab navigation like expected output.I used React native navigation material top navigation.I couldn't do centre the label on the top tab navigator and active indicator. This is my code

   return (
   <Tab.Navigator  initialRouteName="HomeScreen" 
   screenOptions={{tabBarActiveTintColor:'white',
   tabBarIndicatorStyle:{backgroundColor:'black'},
   tabBarScrollEnabled: true,
   tabBarLabelStyle: {fontSize: 12,color: 'black',fontFamily:"Regular",},
   tabBarItemStyle: {},
   tabBarStyle: {elevation:0,width: "auto",},
   }}>
     <Tab.Screen
       name={'HomePage'}
       component={HomePage}
       options={{
         tabBarLabel: 'Home',
         headerShown: false,
         tabBarIcon: ({color, size}) => (
           <MaterialCommunityIcons name="home" color={color} size={size} />
         ),
       }}
     />
     <Tab.Screen
       name={'Profile'}
       component={Profile}
       options={{
         tabBarLabel: 'Profile',
         headerShown: false,
         tabBarIcon: ({color, size}) => (
           <MaterialCommunityIcons
             name="book-open-blank-variant"
             color={color}
             size={size}
           />
         ),
       }}
     />
   </Tab.Navigator>
 );
};
Anushka Praveen
  • 109
  • 2
  • 13

0 Answers0