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
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { TabNavigation, TabButton, TabIcons } from '@opengeekslab/react-native-tab-navigator';
import Screen1 from './screens/screen1';
import Screen2 from './screens/screen2';
import Screen3 from './screens/screen3';
import Screen4 from './screens/screen4';
import Screen5 from './screens/screen5';
const navigationRouter = {
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',
},
],
},
},
};
const defaultConfig = {
lazy: true,
defaultRoute: 'Screen_3',
screenOptions: {
showTitle: true,
animated: true,
buttonView: TabButton,
activeTintColor: '#0579fc',
inactiveTintColor: '#818692',
animation: ['ripple', 'rotationZ'],
},
};
const TabNavigation = TabNavigation(navigationRouter, defaultConfig);
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<TabNavigation />
</View>
);
}
}
const styles = 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
const myIcon = 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.