×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

React Native - tab-based navigation

0
0
 
0
Language: Javascript
Posted by: Alen Abraham
Added: May 18, 2020 3:26 PM
Views: 4347
Tags: no tags
  1. // You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or
  2. // react-native-vector-icons/Ionicons otherwise.
  3. import Ionicons from 'react-native-vector-icons/Ionicons';
  4.  
  5. export default function App() {
  6.   return (
  7.     <NavigationContainer>
  8.       <Tab.Navigator
  9.         screenOptions={({ route }) => ({
  10.           tabBarIcon: ({ focused, color, size }) => {
  11.             let iconName;
  12.  
  13.             if (route.name === 'Home') {
  14.               iconName = focused
  15.                 ? 'ios-information-circle'
  16.                 : 'ios-information-circle-outline';
  17.             } else if (route.name === 'Settings') {
  18.               iconName = focused ? 'ios-list-box' : 'ios-list';
  19.             }
  20.  
  21.             // You can return any component that you like here!
  22.             return <Ionicons name={iconName} size={size} color={color} />;
  23.           },
  24.         })}
  25.         tabBarOptions={{
  26.           activeTintColor: 'tomato',
  27.           inactiveTintColor: 'gray',
  28.         }}
  29.       >
  30.         <Tab.Screen name="Home" component={HomeScreen} />
  31.         <Tab.Screen name="Settings" component={SettingsScreen} />
  32.       </Tab.Navigator>
  33.     </NavigationContainer>
  34.   );
  35. }

Write a comment

To post comments, please log in or register.