About

Our company provides custom UI design and development solutions for mobile applications and websites.

Need a team to create a project?

This project is developed and maintained by openGeeksLab LLC.

react-native-tab-navigator

Requirements

• React Native 0.50+
• iOS 9.0+
• Android 4.2+

Installation

Just run:

• npm i @opengeekslab/react-native-tab-navigator

Basic usage

importReact,{Component}from'react';import{StyleSheet,View}from'react-native';import{TabNavigation,TabButton,TabIcons}from'@opengeekslab/react-native-tab-navigator';importScreen1from'./screens/screen1';importScreen2from'./screens/screen2';importScreen3from'./screens/screen3';importScreen4from'./screens/screen4';importScreen5from'./screens/screen5';constnavigationRouter={Screen_1: {screen: Screen1,screenOptions: {title: 'Item 1',showTitle: true,animated: true,tabIcon: TabIcons.Social,animation: [{name: 'rotationY',type: 'bouncing',},],},},Screen_2: {screen: Screen2,screenOptions: {title: 'Item 2',showTitle: true,tabIcon: TabIcons.Message,animation: ['ripple',{name: 'scale'},{name: 'fume',duration: 700,},{name: 'fadeOut',duration: 700,},],},},Screen_3: {screen: Screen3,screenOptions: {title: 'Item 3',tabIcon: TabIcons.TuneView,animated: true,animation: [],},},Screen_4: {screen: Screen4,screenOptions: {title: 'Item 4',tabIcon: TabIcons.Bell,animation: [{name: 'pendulum',duration: 700,},],},},Screen_5: {screen: Screen5,screenOptions: {title: 'Item 5',tabIcon: TabIcons.Lever,animation: [{name: 'scale',type: 'bouncing',},],},},};constdefaultConfig={lazy: true,defaultRoute: 'Screen_3',screenOptions: {showTitle: true,animated: true,buttonView: TabButton,activeTintColor: '#0579fc',inactiveTintColor: '#818692',animation: ['ripple','rotationZ'],},};constTabNavigation=TabNavigation(navigationRouter,defaultConfig);typeProps={};exportdefaultclassAppextendsComponent<Props>{render(){return(<Viewstyle={styles.container}><TabNavigation/></View>);}}conststyles=StyleSheet.create({container: {flex: 1,backgroundColor: '#F5FCFF',},});

To add a screen to the tab bar, you need to create an object containing information about routers.

Screen_1: {screen: Screen1,screenOptions: {title: 'Item 1',showTitle: true,animated: true,tabIcon: TabIcons.Social,animation: [{name: 'rotationY',type: 'bouncing',},],},}

• screen - is the screen to display

• screenOptions - is options for the screen, which could contain the following fields:

  • title - the name under the tab icon, if you do not specify it, then it will use as a default and will be equal to the key (as the example: Screen_1)

  • showTitle - is the flag, indicating the display of the name of the tab.

  • animated - is the flag, indicating whether the icon should be animated.

  • tabIcon - fields of the transfer picture or component, which is used as a tab icon.

  • animation - the field which is contain an array with the desired animations provided by the library.

  • activeTintColor - the color of active tab

  • inactiveTintColor - inactive tab color

  • iconStyle - custom Icon Style

  • textStyle - custom name style of the tab

  • textActiveStyle - custom name style for an active tab

  • textInactiveStyle - custom name style for inactive tab

Animations usage

The library provides animations fume, pendulum, rotationX, rotationY, rotationZ, opacity, scale, ripple. All animations can be combined.

 animation: ['ripple','scale',]

Also, animations can be additionally set aside. If you transfer an object to the animation array that consists of the field 'name' - the name of the animation and the type: "bouncing", the animation will have an "elastic effect" (except Ripple).

animation: [{name: 'scale',type: 'bouncing',}]

In the field of durations, you specify the animation time in milliseconds (400ms by default)

animation: [{name: 'fume',duration: 700,},{name: 'fadeOut',duration: 700,},]

The library provides built-in icons for Social, Message, TuneView, Bell, Lever, Tune. They can be imported

import{TabIcons}from'react-native-tab-navigator';{title: 'Item 5',tabIcon: TabIcons.Lever}

You can transfer your icon

constmyIcon=require('./my-icon-file.png');{title: 'Item 5',tabIcon: myIcon}

You can send a component as an icon. If the component implements internal animations, it must provide a callAnimations() method to call the animations.

Contact us if interested.

Inspired by @Ramotion

Licence

Expanding is released under the MIT license.