react-native
  1. react-native-create-material-top-tab-navigator
PreviousNext

React-Native Create Material Top Tab Navigator

Syntax

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={Screen1} />
      <Tab.Screen name="Tab2" component={Screen2} />
      <Tab.Screen name="Tab3" component={Screen3} />
    </Tab.Navigator>
  );
}

Example

import React from 'react';
import { View, Text } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

const Screen1 = () => <View><Text>Screen 1</Text></View>;
const Screen2 = () => <View><Text>Screen 2</Text></View>;
const Screen3 = () => <View><Text>Screen 3</Text></View>;

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={Screen1} />
      <Tab.Screen name="Tab2" component={Screen2} />
      <Tab.Screen name="Tab3" component={Screen3} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <MyTabs />
    </View>
  );
}

Output

The code above will result in a Material Top Tab Navigator with three tabs: "Tab1", "Tab2", and "Tab3".

Explanation

The Material Top Tab Navigator from @react-navigation/material-top-tabs is a component that allows you to easily create a tab bar at the top of your app. It is designed to follow the Material Design guidelines for navigation and provides several customization options.

To create a Material Top Tab Navigator, you first need to import createMaterialTopTabNavigator from @react-navigation/material-top-tabs. This function returns a navigator component that you can use in your app.

Inside the <Tab.Navigator> component, you can define each tab using <Tab.Screen>. Each screen needs a unique name and a component that will be rendered when the tab is active.

Use

The Material Top Tab Navigator is useful when you want to provide a way to switch between different screens or sections of your app. It is especially useful when you have more than two options to display, as it provides an organized and visually appealing interface.

Some customizations that can be made include:

  • tabBarOptions: Allows you to customize the appearance of the tab bar, including the color, height, font, and more.
  • lazy: Allows screens to be loaded lazily, meaning that they will only be rendered when they are actually displayed.
  • swipeEnabled: Allows the user to swipe between tabs. Can be disabled if desired.
  • initialRouteName: Allows you to specify which tab should be displayed when the component is first rendered.

Important Points

  • The Material Top Tab Navigator is compatible with both Android and iOS devices.
  • When using this navigator, it is important to define a unique name for each screen.
  • If you navigate to a screen within the Material Top Tab Navigator, you can use navigation.goBack() to return to the previous tab.

Summary

The Material Top Tab Navigator is a useful component for creating tabbed navigation in your React Native app. It provides a visually appealing interface that follows Material Design guidelines and can be customized to fit your needs.

Create Material Bottom Tab Navigator .Drawer Navigation
Published on: