Swipe Navigation on React Native

Hi Everyone!

Before I use many times standart tab stacks. Today i want to talk about swipable tabs. We can see that on instagram, Instagram uses swipeable navigation. I also want to try swipeable modern navigation with React Native Navigation.

Firstly, we should import our dependencies what we need. You can use yarn or npm for import those dependencies.

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

yarn;
yarn add @react-navigation/material-top-tabs react-native-tab-view

Yess.. no longer, we can use those packages now..

/* Tabs.js */
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

Now, we can use that import method.

const Tab = createMaterialTopTabNavigator();

We defined a const variable as name Tab. We can use this variable like Tab.Navigator and Tab.Screen. No longer, We can create our screen what we want to display your tabs. I’m going to create Home, Search, Reel, Shop and Profile screens then going to import this screen into the Tabs.js

/* Tabs.js */
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";import {
  HomeScreen,
  SearchScreen,
  ReelScreen,
  ShopScreen,
  ProfileScreen,
} from "./screens/index";const Tab = createMaterialTopTabNavigator();

Normally, this top bar navigation’s position is top. We can change with props of tabBarPosition for this position. I also set it’s indicator height with props of tabBarIndicatorStyle. This is a quick example about swipeable tab navigation, if you need more props and details, you can visit its own documentation. Don’t forget your own icons or you can use a library for that :)

/* Tabs.js */
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import {
  HomeScreen,
  SearchScreen,
  ReelScreen,
  ShopScreen,
  ProfileScreen,
} from "./screens/index";
import {
  Home,  HomeFilled,  Search,  SearchFilled,  Reel,  ReelFilled,
  Shop,  ShopFilled,
} from "./icons";

const Tab = createMaterialTopTabNavigator();

export default function Tabs() {
  return (
    <Tab.Navigator
      initialRouteName="HomeScreen"
      tabBarPosition="bottom"
      screenOptions={{
        tabBarShowLabel: false,
        headerShown: false,
        tabBarActiveTintColor: "#000",
        tabBarInactiveTintColor: "#262626",
        tabBarStyle: {
          borderTopWidth: 0.2,
          borderColor: "#000",
        },
        tabBarIndicatorStyle: {
          height: 0,
        },
      }}
    >
      <Tab.Screen
        name="HomeScreen"
        options={{
          tabBarIcon: ({ focused, color }) => {
            return focused ? (
              <HomeFilled fill={color} />
            ) : (
              <Home fill={color} />
            );
          },
        }}
        component={HomeScreen}
      />
      <Tab.Screen
        name="SearchScreen"
        options={{
          tabBarIcon: ({ focused, color }) => {
            return focused ? (
              <SearchFilled fill={color} />
            ) : (
              <Search fill={color} />
            );
          },
        }}
        component={SearchScreen}
      />
      <Tab.Screen
        name="ReelScreen"
        options={{
          tabBarIcon: ({ focused, color }) => {
            return focused ? (
              <ReelFilled fill={color} />
            ) : (
              <Reel fill={color} />
            );
          },
        }}
        component={ReelScreen}
      />
      <Tab.Screen
        name="ShopScreen"
        options={{
          tabBarIcon: ({ focused, color }) => {
            return focused ? (
              <ShopFilled fill={color} />
            ) : (
              <Shop fill={color} />
            );
          },
        }}
        component={ShopScreen}
      />
      <Tab.Screen
        name="ProfileScreen"
        options={{
          tabBarIcon: ({ focused, color }) => {
            return focused ? (
              <ProfileFilled fill={color} />
            ) : (
              <Profile fill={color} />
            );
          },
        }}
        component={ProfileScreen}
      />
    </Tab.Navigator>
  );
}

Almost done, then we can include Tabs that we created into the App.js

/* App.js */

import { NavigationContainer } from "@react-navigation/native";
import { SafeAreaView } from "react-native";
import Tabs from "./Tabs";

export default function App() {
  return (
      <SafeAreaView style={{ flex: 1 }}>
        <NavigationContainer>
          <Tabs />
        </NavigationContainer>
      </SafeAreaView>
  );
}

That’s all, have a nice day!