Tab view in React-Native

|
| By Webner

It provides various packages to create tabs like views in the application. So react-native-tab-view is one of them. This component is implemented using the react-native-pager-view which is another component that allows the user to swipe left or right throughout the page data. React-native-tab-view provides smooth animation and gestures and has scrollable tabs. It supports both top and bottom tab bars.

Installation:

npm install react-native-tab-view
After this we need to install react-native-pager-view to support Android and ios platforms:
npm install react-native-pager-view

Example:

import * as React from 'react';
import { View, useWindowDimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View style={{ flex: 1, backgroundColor: '#ff4081' }} />
); //component for first route
const SecondRoute = () => (
<View style={{ flex: 1, backgroundColor: '#673ab7' }} />
); // component for second route
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
export default function TabViewExample() {
const layout = useWindowDimensions();
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
);
}

Where
navigationState(required) is a State for the tab view. It should contain the following properties:

  • Index is used to represent the index of the active route in the routes array
  • Route is an array that contains a list of route objects that are used to render tabs.

onIndexChange(required) is a callback function that receives the index of the new tab as an argument when the tab is changed.
renderScene is also a callback function that returns a react element to render as a page for tab. To learn about more props you can follow this link.

The final result will look like this:
React

Leave a Reply

Your email address will not be published. Required fields are marked *