React native tabs component examples and navigation libraries you should know

In this article, we will introduce React-native-scrollable-tab-view component examples and navigation libraries that you should know.

Component Example

1. React-native-scrollable-tab-view Forked

This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple JavaScript-only implementation of it for React Native. For more information about how the animations behind this work, check out the Rebound section of the React Native Animation Guide

React Native Scrollable Tab View

2. React Native Chonse Select

React chonse select tab horizontal

"React Native Chonse Select"

3. React-native-scrollable-tab-view Mask Bar

To show scrollable tabs .this component is a custom component of the react-native-scrollable-tab-view repository. So that, you should use this component and the combination of react-native-scrollable-tab-view.

React Native

4. Segmented Control Tab – React Native tab bar

A react native component with the same concept of react native’s SegmantedControlIOS, Primarily built to support both IOS and Android.

React-native-scrollable-tab-view

5. React Native Tabbar Interaction – React-native-scrollable-tab-view

Tabbar Component For React-Native

"React Native Tabbar Interaction"

6. React Native Underline Tabbar

This React-native-scrollable-tab-view consists of some features e.g. scrollable content in tabs. Animations are build on matrix transformations and fully compatible with Animated library. In a new version there was significant improvement of tabbar behaviour.

"React Native Underline Tabbar"

7. React Tabbar – React-native-scrollable-tab-view

A tabbar component for React Native. To clarify, it uses react support android and ios, mobile bottom tab bar with more freedom. Moreover, it solves the problem overflow parent hidden on the android, also it can be defined center item by itself.

React-native-scrollable-tab-view

8. React Native Tab bar

React Tab bar with more freedom.
Now there is only one component, and that is Tabbar. To clarify, all the children inside Tabbar component will be rendered inside of it. There are no TabItem, WithIcon or anything else. What you put into Tabbar will be displayed as tabs. By doing that, you can attach it to your favourite state managements such as Redux, or Mobx. Therefore, this module should be use as a first base block for more sophisticated tabbar.

React-native-scrollable-tab-view

9. React Native Tabs – React-native-scrollable-tab-view

React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)

tabs

10. React Native Tab Navigator

A tab bar that switches between scenes, written in JS for cross-platform support. It also works on iOS and Android.

This component is compatible with React Native 0.16 and newer.

Moreover, the look and feel is slightly different than the native navigator but it is better in some ways. Also this React-native-scrollable-tab-view is pure JavaScript.

"React Native Tab Navigator"

11. React Tabbar Navigator

A component which builds excellent Navigator (NavigationController) + TabBa r(TabBarController) based application, have a good solution for implementing hidesBottomBarWhenPushed in iOS.

Tabbar

12. React Tabbar – React-native-scrollable-tab-view

Mobile bottom tab bar using react-native,support android and ios. To clarify, pages won’t be rendered when you switch to other tabs, also save the status of invisible pages.
"React Native Tabbar"

13. React Native Tab View

A cross-platform Tab View component

React-native-scrollable-tab-view

Features

  • Firstly, smooth animations and gestures
  • Secondly, scrollable tabs
  • Thirdly, supports both top and bottom tab bars
  • Then, follows Material Design spec
  • Highly customizable
  • Fully typed with TypeScript

14. M Tabs – React-native-scrollable-tab-view

React Mobile Tabs Component (web & react-native)

M Tabs

15. React Tab Navigator

A tab bar that switches between scenes, written in JS for cross-platform support. This React-native-scrollable-tab-view also works on iOS and Android.

Navigator

This component is compatible with React Native 0.16 and newer.

The look and feel is slightly different than the native navigator but it is better in some ways. Also it is pure JavaScript.

Top 3 Navigation libraries

1. React Navigation Tabs

Installation

Most important, add the react-navigation-tabs package to your project.

Usage

The package exports two different navigators:

  • createBottomTabNavigator: iOS like bottom tabs.
  • createMaterialTopTabNavigator: Material design themed top tabs with swipe gesture, from react-native-tab-view.

To clarify, you can import individual navigators and use them:

import { createBottomTabNavigator } from 'react-navigation-tabs';

export default createBottomTabNavigator({
  Album: { screen: Album },
  Library: { screen: Library },
  History: { screen: History },
  Cart: { screen: Cart },
});

Moreover, you can install another package, react-navigation-material-bottom-tabs, to use a third type of tab navigator:

  • createMaterialBottomTabNavigator: Material design themed animated bottom tabs, from react-native-paper.
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';

export default createMaterialBottomTabNavigator(
  {
    Album: { screen: Album },
    Library: { screen: Library },
    History: { screen: History },
    Cart: { screen: Cart },
  },
  {
    initialRouteName: 'Album',
    activeTintColor: '#F44336',
  },
);

Development workflow

Firstly, to setup the development environment, open a Terminal in the repo directory and run the following:

yarn bootstrap

Secondly, while developing, you can run the example app with Expo to test your changes:

yarn example start

Moreover, make sure your code passes TypeScript and ESLint. Run the following to verify:

yarn typescript
yarn lint

Then, to fix formatting errors, run the following:

yarn lint --fix

2. react-native-segmented-control-tab

This has been made into a controlled component from 3.0. To clarify, those who are familiar with 2.0, read below for the updated usage.

import SegmentedControlTab from "react-native-segmented-control-tab";

class ConsumerComponent extends Component {
  constructor() {
    super();
    this.state = {
      selectedIndex: 0
    };
  }

  handleIndexChange = index => {
    this.setState({
      ...this.state,
      selectedIndex: index
 });
  };

  render() {
    return (
      <View>
        <SegmentedControlTab
          values={["First", "Second", "Third"]}
          selectedIndex={this.state.selectedIndex}
          onTabPress={this.handleIndexChange}
        />
      </View>
    );
  }
}

3. React Tab View

Installation

Open a Terminal in the project root and run:

yarn add react-native-tab-view

So, now we need to install react-native-gesture-handler and react-native-reanimated.

Firstly, if you are using Expo, to ensure that you get the compatible versions of the libraries, run:

expo install react-native-gesture-handler react-native-reanimated

Secondly, if you are not using Expo, run the following:

yarn add react-native-reanimated react-native-gesture-handler

Final Thoughts

We – ArrowHiTech is a leading outsourcing companies in Vietnam. With over 14 years of experience in  React Native development , we can give the the best service for your business. Contact us now!

Tags

Share