React Native Tabs | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

Adding Tabs in a React Native Application

Tabs are used to group content

react-native-scrollable-tab-view package provides ScrollableTabView and ScrollableTabBar

These can be used to implement tabs which can be scrolled like a viewpager and along with the tab bar

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named NcTabsApp)

react-native init NcTabsApp

This creates a directory named NcTabsApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Dependency

Go to project directory (here NcTabsApp)

cd NcTabsApp

Add react-native-scrollable-tab-view package to current project using yarn

yarn add react-native-scrollable-tab-view

or using npm

npm install react-native-scrollable-tab-view --save

iOS

After yarn add command, cd into ios folder inside project directory

cd ios

Use pod command to install any required CocoaPods dependencies:

pod install

Usage

Example usage of ScrollableTabView:

<ScrollableTabView
    style={{ marginTop: 20 }}
    initialPage={0}
    renderTabBar={() => <ScrollableTabBar />}
  >
    <Text tabLabel='Tab #1'>Eat</Text>
    <View style={styles.tab2} tabLabel='Tab #2 word word'><Text>Sleep</Text></View>
    <Text tabLabel='Tab #3 word word word'>Code</Text>
    <Tab4 tabLabel='Tab #4 word word word word'><Text>Sleep</Text> </Tab4>
    <Image tabLabel='Tab #5' style={styles.image}  source={{uri:"https://resourceplus.files.wordpress.com/2015/01/image.jpg"}} />
</ScrollableTabView>

Some of its props are

Props

renderTabBar a ScrollableTabBar component or a (Function:ReactComponent) with some its props
tabBarPosition (String) Defaults to "top"
- "bottom" to position the tab bar below content
- "overlayTop" or "overlayBottom" for a semitransparent tab bar that overlays content
onChangeTab (Function) - function to call when tab changes, should accept 1 argument which is an Object containing two keys: i: the index of the tab that is selected, ref: the ref of the tab that is selected
onScroll (Function) - function to call when the pages are sliding, should accept 1 argument which is an Float number representing the page position in the slide frame
locked (Bool) - disables horizontal dragging to scroll between tabs, default is false
initialPage (Integer) - the index of the initially selected tab, defaults to 0 === first tab
page (Integer) - set selected tab(can be buggy see #126
children (ReactComponents) - each top-level child component should have a tabLabel prop that can be used by the tab bar component to render out the labels/li>
tabBarUnderlineStyle (View.propTypes.style) - style of the default tab bar's underline
tabBarBackgroundColor (String) - color of the default tab bar's background, defaults to white
tabBarActiveTextColor (String) - color of the default tab bar's text when active, defaults to navy
tabBarInactiveTextColor (String) - color of the default tab bar's text when inactive, defaults to black
tabBarTextStyle (Object) - Additional styles to the tab bar's text Example: {fontFamily: 'Roboto', fontSize: 15}
style (View.propTypes.style)
contentProps (Object) - props that are applied to root ScrollView/ViewPagerAndroid
scrollWithoutAnimation (Bool) - on tab press change tab without animation
prerenderingSiblingsNumber (Integer) - pre-render nearby # sibling, Infinity === render all the siblings, default to 0 === render current page

Except first parameter, others are optional

Following are some cross-platform properties of Modal component

animationType: slide, fade or none
onRequestClose: required for Android - function to be called when user taps the hardware back button on Android or the menu button on Apple TV
onShow: function to be called when modal is shown
transparent: determines whether modal is to fill the entire view, modal is renderedover a transparent background when set to true
visible: determines visibility of the component

Properties other than onRequestClose are optional

Import

import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';

App Code

App.js

import React from 'react';
import {
  Text,
  View,
  Image,
} from 'react-native';
import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';

export default App = () => {
  return <ScrollableTabView
    style={{ marginTop: 20 }}
    initialPage={0}
    renderTabBar={() => <ScrollableTabBar />}
  >
    <Text tabLabel='Tab #1'>Eat</Text>
    <View style={styles.tab2} tabLabel='Tab #2 word word'><Text>Sleep</Text></View>
    <Text tabLabel='Tab #3 word word word'>Code</Text>
    <Tab4 tabLabel='Tab #4 word word word word'><Text>Sleep</Text> </Tab4>
    <Image tabLabel='Tab #5' style={styles.image}  source={{uri:"https://resourceplus.files.wordpress.com/2015/01/image.jpg"}} />
  </ScrollableTabView>;
}

class Tab4 extends React.Component {
  render() {
    return (
      <View>
        <Image style={styles.image} source={{uri: "https://eatsleepmeme.com/wp-content/uploads/2020/06/thumb_none-can-have-shi-by-ztfares-more-memes-72554285.png"}} />
      </View>
    );
  }
}

const styles = {
    tab2: {
      backgroundColor: 'orange',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100%'
    },
    image: {
      resizeMode: 'stretch',
      width: '100%',
      height: '100%'
    }
}