[react-native][expo] Tab Navigator

https://reactnavigation.org/docs/tab-based-navigation/

• install

  npm install @react-navigation/bottom-tabs
  

• Simple example of tab navigation ```js import * as React from ‘react’; import { Text, View } from ‘react-native’; import { NavigationContainer } from ‘@react-navigation/native’; import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;

function HomeScreen() { return ( <View style=> Home! </View> ); }

function SettingsScreen() { return ( <View style=> Settings! </View> ); }

const Tab = createBottomTabNavigator();

export default function App() { return ( <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Settings" component={SettingsScreen} /> ); }

* Appearance
```js
// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';

// (...)

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions=
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

• badges ```js

<Tab.Screen name=”Home” component={HomeScreen} options= />

* Jumping between tabs
```js
function HomeScreen({ navigation }) {
  return (
    <View style=>
      <Text>Home!</Text>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style=>
      <Text>Settings!</Text>
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
    </View>
  );
}

• Stack nav in a tab
  • Use the code below

      onPress={() => navigation.navigate('Details')}
    

  • like this:

    import * as React from 'react';
    import { Button, Text, View } from 'react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  
    function DetailsScreen() {
    return (
        <View style=>
        <Text>Details!</Text>
        </View>
    );
    }
  
    function HomeScreen({ navigation }) {
    return (
        <View style=>
        <Text>Home screen</Text>
        <Button
            title="Go to Details"
            onPress={() => navigation.navigate('Details')}
        />
        </View>
    );
    }
  
    function SettingsScreen({ navigation }) {
    return (
        <View style=>
        <Text>Settings screen</Text>
        <Button
            title="Go to Details"
            onPress={() => navigation.navigate('Details')}
        />
        </View>
    );
    }
  
    const HomeStack = createStackNavigator();
  
    function HomeStackScreen() {
    return (
        <HomeStack.Navigator>
        <HomeStack.Screen name="Home" component={HomeScreen} />
        <HomeStack.Screen name="Details" component={DetailsScreen} />
        </HomeStack.Navigator>
    );
    }
  
    const SettingsStack = createStackNavigator();
  
    function SettingsStackScreen() {
    return (
        <SettingsStack.Navigator>
        <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        <SettingsStack.Screen name="Details" component={DetailsScreen} />
        </SettingsStack.Navigator>
    );
    }
  
    const Tab = createBottomTabNavigator();
  
    export default function App() {
    return (
        <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeStackScreen} />
            <Tab.Screen name="Settings" component={SettingsStackScreen} />
        </Tab.Navigator>
        </NavigationContainer>
    );
    }