React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It is based on React, Facebook’s JavaScript library for building user interfaces and it targets mobile platforms.

React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in or Java (for Android) and Objective-C (for iOS). Thus, your application will be rendered using real mobile UI components, not webviews, and it will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

What is TabView in react native?

It is a cross-platform Tab View component for React Native. It is implemented using reactnativepager-view on Android & iOS.

What you will learn in this article?

  1. How to create a new Project using expo.
  2.  How to implement TabView in React Native.

Before you start you should have WebStorm or VSCode, expo and Node.js installed in your computer.

Open your terminal and follow along

1. To install expo you need to follow the following step:

npm install -g expo-cli

This will install expo-cli in your system globally.

2. To create a new Project:

Open command prompt in the location where you want to create your project.

In the command prompt write following commands:

expo init newapp

3. To navigate to the folder: newapp is the folder name which will be created.

cd newapp

You will find a folder named ‘newapp’ in your directory where you created the project. Open that in WebStorm/ VSCode.

Read More:   A COMPLETE GUIDE TO BENEFIT FROM MVP DEVELOPMENT

Open a Terminal in the project root and run:

yarn add react-native-tab-view

Now we need to install react-native-pager-view.

yarn add react-native-pager-view

Now we have to run the app using the following command:

expo start

To run the app on your device:

Install expo from playstore.

Scan the QR code from the Expo Server started in your browser.

This will start the application in your device

The package – react-native-tab-view exports a TabView component which is the one you’d use to render the tab view, and a TabBar component which is the default tab bar implementation used in this package.

Lets try to understand the components at an individual level:

TabView

It is a container component responsible for managing and rendering tabs. It follows material design styles by default.

Its usage is as follows:

Basic usage look like this:

<TabView

navigationState={{ index, routes }}

renderScene={renderScene}

renderTabBar={renderTabBar}

onIndexChange={setIndex}

initialLayout={{ width: layout.width }}

/>

 There are various props used in TabView. Some of them are stated below:

navigationState (required)

It represents the state for the tab view. The state should contain the following properties:

  • index: a number representing the index of the active route in the routes array
  • routes: an array containing a list of route objects used for rendering the tabs

Each route object should contain the following properties:

  • key: a unique key to identify the route (required)
  • title: title for the route to display in the tab bar
  • icon: icon for the route to display in the tab bar
  • accessibilityLabel: accessibility label for the tab button
  • testID: test id for the tab button

Example:

const [index, setIndex] = React.useState(0);

const [routes] = React.useState([

  { key: 'first', title: 'First' },

  { key: 'second', title: 'Second' },

]);

TabView is a controlled component, which means the index needs to be updated via the onIndexChange callback.

onIndexChange (required)

It is a callback which is called on tab change, it receives the index of the new tab as argument. The navigation state needs to be updated when it’s called, otherwise the change is dropped.

Read More:   Bluetooth and Bluetooth Low Energy: definitions, use cases, benefits 2022
renderScene (required)

It is a callback which returns a react element to render as the page for the tab. It receives an object containing the route as the argument.

You need to make sure that your individual routes implement a shouldComponentUpdate to improve the performance. To make it easier to specify the components, you can use the SceneMap helper.

SceneMap takes an object with the mapping of route.key to React components and returns a function to use with renderScene prop.

const FirstRoute = () => (
<View style={{ flex: 1, backgroundColor: 'grey'}}>
  <Text>Tab One</Text>
</View>
);
const SecondRoute = () => (
<View style={{ flex: 1, backgroundColor: 'darkgrey'}} >
  <Text>Tab Two</Text>
</View>
);
const renderScene = SceneMap({

  first: FirstRoute,

  second: SecondRoute,

});
renderTabBar

It is a callback which returns a custom React Element to use as the tab bar:

const renderTabBar = props => (
<TabBar
    {...props}
    activeColor={'white'}
    inactiveColor={'black'}
        style={{marginTop:25,backgroundColor:'red'}}
/>
);

If this is not specified, the default tab bar is rendered. You pass these props to customize the default tab bar, provide your own tab bar, or disable the tab bar completely.

initialLayout

It is the object containing the initial height and width of the screens. This will improve the initial rendering performance. For most apps, this is a good default:

<TabView
initialLayout={{ width: layout.width }}
/>

There are various other properties which can be implemented in TabView for various other purpose such as styling the component etc.

The entire code can be summed up as:

import * as React from 'react';
import { View, useWindowDimensions, Text} from 'react-native';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
 
const FirstRoute = () => (
<View style={{ flex: 1, backgroundColor: 'grey'}}>
  <Text>Tab One</Text>
</View>
);
const SecondRoute = () => (
<View style={{ flex: 1, backgroundColor: 'darkgrey'}} >
  <Text>Tab Two</Text>
</View>
);
 
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' },
  ]);
 
  const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
  });
 
  const renderTabBar = props => (
  <TabBar
      {...props}
      activeColor={'white'}
      inactiveColor={'black'}
          style={{marginTop:25,backgroundColor:'red'}}
  />
  );
 
  return (
  <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
  />
  );
}

Source: InApps.net

Read More:   Flutter vs React Native vs Xamarin: What's best in 2022?

List of Keywords users find our article on Google:

webstorm
objective-c jobs
react native webview
expo cli
expo react native
react native textinput
react native camera
react native navigation
react native tabs
expo-cli
react native expo
react vision
phpstorm reviews
textinput react native
tabview
react native templates
react render
react xml
npm expo
react native pager view
application portfolio tools with xml input
react native tab
top tab navigation react native
react-native text input
navigation in react native expo
native complete
text reactnative
react native text
webstorm vs
webstorm reviews
react native menu
react-native-material-menu
react-native run-android
usestate object
material ui tabs
react native view
react native components
create react native library
“react-native”
complete story fb
react-native-pager-view
react native device info npm
react keywords
webstorm active code
react cross component communication
react native vision camera qr code
flutter tabbar full width
react native title bar
react-native-webview
react-native-vision-camera qr code
webview react native
flutter webstorm
react native camera npm
reactnative webview
android tablayout select first tab on startup
react-native tab
react-native-device-info
expo install
flutter get height of status bar
jsx jobs
webstorm flutter
which component is responsible to run java program
react navigation tabs
webstorm reactjs
react native device info
webstorm file icons
webstorm react
install expo globally
text input react native
react-native-location
react-native-phone-input
expo client app
react-native-menu
react-native-qrcode-scanner
array react native
react native expo camera
react object to array
textview in flutter
expo development client
model route flutter
phoneinput react
react native screens
react-web-tabs
react native expo template
react native top tab
expo react
install expo in react native
react navigation expo
react-native-screens
webview react-native expo
install expo cli
react native expo templates
react usestate array of objects
react-navigation native
tabs in react native
flutter very good cli
react admin vs
react native template design
react qrcode generator
react tab navigation
vision react
expo react native install
react native qr
react native template
react phone number input
react expo
react native expo cli
react native open whatsapp
react usestate array
react usestate array not updating
flutter tabview example
react native expo icon
react native touch id
custom tabs in flutter
expo init project
flex hrm
phpstorm full
Rate this post

Let’s create the next big thing together!

Coming together is a beginning. Keeping together is progress. Working together is success.

Let’s talk

Get a custom Proposal

Please fill in your information and your need to get a suitable solution.

    You need to enter your email to download

      [cf7sr-simple-recaptcha]

      Success. Downloading...