Add Top Tab Navigation using React Native

Tiempo de lectura: 2 minutos

Reading time: < 1 minutes

If you want to add a Top Tab Navigation using React Native to achieve the result shown in this image:

First, you need to install the necessary dependency (remember to install React Navigation first):

npm install npm install @react-navigation/material-top-tabs react-native-tab-view --save

Once installed, it is used in the same way as a Bottom Tab Navigation:

// Import the libraries
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

Now create the instance for the Tabs:

const Tab = createMaterialTopTabNavigator();

Next, add the navigation tree and the NavigationContainer where each Screen will be displayed (remember to import the screens you want to use and add them inside the component={} variable):

<NavigationContainer>
    <Tab.Navigator initialRouteName="Videos">
        <Tab.Screen name="Videos" component={VideoList} options={{ headerShown: false }} />
        <Tab.Screen name="Forum" component={ForumList} options={{ headerShown: false }} />
        <Tab.Screen name="Quiz" component={Quiz} options={{ headerShown: false }} />
    </Tab.Navigator>
</NavigationContainer>

The complete code will look like this:

// Import the libraries
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

// Import the screens
import VideoList from '../screens/VideoList';
import ForumList from '../screens/ForumList';
import Quiz from '../screens/Quiz';

// Navigation component
const Navigation = () => {
  return (
    <View>
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Videos">
          <Tab.Screen name="Videos" component={VideoList} options={{ headerShown: false }} />
          <Tab.Screen name="Forum" component={ForumList} options={{ headerShown: false }} />
          <Tab.Screen name="Quiz" component={Quiz} options={{ headerShown: false }} />
        </Tab.Navigator>
      </NavigationContainer>
    </View>
  );
};

Reading time: < 1 minutes

If you want to add a Top Tab Navigation using React Native to achieve the result shown in this image:

First, you need to install the necessary dependency (remember to install React Navigation first):

npm install npm install @react-navigation/material-top-tabs react-native-tab-view --save

Once installed, it is used in the same way as a Bottom Tab Navigation:

// Import the libraries
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

Now create the instance for the Tabs:

const Tab = createMaterialTopTabNavigator();

Next, add the navigation tree and the NavigationContainer where each Screen will be displayed (remember to import the screens you want to use and add them inside the component={} variable):

<NavigationContainer>
    <Tab.Navigator initialRouteName="Videos">
        <Tab.Screen name="Videos" component={VideoList} options={{ headerShown: false }} />
        <Tab.Screen name="Forum" component={ForumList} options={{ headerShown: false }} />
        <Tab.Screen name="Quiz" component={Quiz} options={{ headerShown: false }} />
    </Tab.Navigator>
</NavigationContainer>

The complete code will look like this:

// Import the libraries
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

// Import the screens
import VideoList from '../screens/VideoList';
import ForumList from '../screens/ForumList';
import Quiz from '../screens/Quiz';

// Navigation component
const Navigation = () => {
  return (
    <View>
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Videos">
          <Tab.Screen name="Videos" component={VideoList} options={{ headerShown: false }} />
          <Tab.Screen name="Forum" component={ForumList} options={{ headerShown: false }} />
          <Tab.Screen name="Quiz" component={Quiz} options={{ headerShown: false }} />
        </Tab.Navigator>
      </NavigationContainer>
    </View>
  );
};