react_native_tabbed_container

React native tabbed container

Simple RN tabbed view container. This is a fully customizable tabbed container to wrap multiple child views into a single container. This is not a tab navigator, it is a in-screen view container.

Installation

No third party or native installation is required. Just run:

npm install --save react_native_tabbed_container

Usage

Define a container to wrap the tabbed view container. This componen will aumatically cover all the space provided by the container view.

Props & styling

Prop	Type	Optional	Description
activeColor	String	Yes	Tab active background color. Default is #41db53
customTabActiveIndicatorStyle	Style	Yes	Indicator element custom style. Default is set to show a white bar on the bottom of the tab.
customTabActiveTextStyle	Style	Yes	Custom text style for active tab. Default is undefined.
customTabHeaderContainerStyle	Style	Yes	Custom container style for tabs. Default is undefined.
customTabInactiveTextStyle	Style	Yes	Custom text style for inactive tab. Default is undefined.
customTabRowContainerStyle	Style	Yes	Custom style for the tabs row container. Defuault is undefined.
inactiveColor	String	Yes	Custom background color for inactive tab. Default is #258e33.
tabsData	Array	No	Tabs data. This is an array of objects with two elements: title and content. Title is a string with the text to be displayed on the tab and content is the view or element to be rendered inside the current tab. It is recommended to use a reasonable amount of tabs.
useBottomTabs	bool	Yes	If enabled, tabs will be shown at the bottom of the container. Default is false.
useSingleMountStrategy	bool	Yes	If enabled, all tabs will be rendered at the same time. Otherwise, tabs content will be mounted and unmounted each time the tab is entered or left. Default is true.

Example

// @Vendors
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import TabbedContainer from 'react_native_tabbed_container';

// @Base styles 
import { fontSize, colors, padding, rowHeight } from './src/styles/baseStyles';

export default class App extends React.PureComponent {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.topbarPlaceholder}>
          <Text style={styles.titleText}> Tabbed container </Text>
        </View>
        <View style={styles.componentFrame}>
          <TabbedContainer
            activeColor={colors.backgroundActiveCustom}
            customTabRowContainerStyle={styles.rowContainer}
            customTabHeaderContainerStyle={styles.customTabContainer}
            customTabActiveIndicatorStyle={styles.activeIndicator}
            inactiveColor={colors.backgroundInactiveCustom}
            customTabActiveTextStyle={styles.activeText}
            customTabInactiveTextStyle={styles.inactiveText}
            tabsData={[
              { title: 'Tab 1', 
                content: (
                  <View style={styles.tabContent}> 
                    <Text>Tab 1 content</Text> 
                  </View> 
                )
              },
              { 
                title: 'Tab 2', 
                content: (
                  <View style={styles.tabContent}> 
                    <Text>Tab 2 content</Text> 
                  </View>
                )
              },
              { 
                title: 'Tab 3', 
                content: (
                  <View style={styles.tabContent}> 
                    <Text>Tab 3 content</Text> 
                  </View>
                )
              }
            ]} />
        </View>
        <View style={styles.bottomPlaceHolder}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.backgroundPrimary,
    paddingHorizontal: padding.mid
  },
  componentFrame: {
    flex: 1
  },
  tabContent: {
    flex: 1,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderLeftWidth: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  topbarPlaceholder: {
    paddingTop: padding.xLarge,
    height: 104,
    alignItems: 'center',
    justifyContent: 'center'
  },
  bottomPlaceHolder: {
    height: 50
  },
  titleText: {
    fontSize: fontSize.xLarge,
    color: colors.fontActive
  },
  rowContainer: {
    height: rowHeight.xSmall,
  },
  customTabContainer: {
    borderTopWidth: 1,
    borderRightWidth: 1,
    borderLeftWidth: 1,
    borderTopLeftRadius: rowHeight.xSmall / 2,
    borderTopRightRadius: rowHeight.xSmall / 2
  },
  activeIndicator: {
    height: 2,
    alignSelf: 'center',
    marginBottom: 4,
    width: 60,
    backgroundColor: colors.indicatorColor
  },
  activeText: {
    fontWeight: '700',
    color: colors.fontActiveCustom
  },
  inactiveText: {
    color: colors.fontLight
  }
});

This will result in: