react-native-scene-navigator


A cross-platform, easy and intuitive way to manage your scenes in react-native. Adapts to the platform, e.g. tabs on top for Android and tabs on the botton for iOS. Scene transitions default to the native platform patterns, but can be changed to your needs.
Run the example on both iOS and Android to see it in action :D

Navigator

Navigator is the root level component that manages all your scene (Scene) transitions. Navigator internally uses the React-Native Navigator component, but makes it easy and intuitive to use.
``
import React, { Component} from 'react';

import { Navigator, Scene } from 'react-native-scene-navigator';

import MainScene from '~/scenes/Main';
import DetailScene from '~/scenes/Detail';
import ModalScene from '~/scenes/Modal';

export default class App extends Component {
render() {
return (

transition={Navigator.transitions.standard}
reference={'main'}
component={MainScene} />
transition={Navigator.transitions.standard}
reference={'detail'}
component={DetailScene} />
transition={Navigator.transitions.modal}
reference={'modal'}
component={ModalScene} />

);
}
};
`

Navigator will pass a navigator to all of the Scenes it manages.

$3


Open any scene you have configured with Navigator.
navigator.open(reference, params)
`
onPress() {
const { navigator } = this.props;

navigator.open('scene-reference', {
pass: {
any: {
params: 'To the scene you wish to open'
}
}
});
}
`

$3


Goes back one scene.
navigator.back()
`
onPress() {
const { navigator } = this.props;

navigator.back();
}
`

$3


Attaching a navigationbar is easy:
`
export default class SomeScene extends Component {
componentWillMount() {
const { scene: { reference }, navigator } = this.props;

// navigator needs a scene reference,
// or it won't know where to attach your NavigationBar!
navigator.attachNavigationBar(reference,

SomeSceneTitle

);
}
...
}
`

TabNavigator


Add a TabNavigator to manage your TabScenes. TabNavigator will pass the navigator you provide it to the Scenes it manages. It can also be used independent of Navigator.

TabNavigator internally uses TabBarIOS for iOS and ViewPagerAndroid for android.
`
import React, { Component } from 'react';
import { TabNavigator, Scene } from 'react-native-scene-navigator';

import Tab1Scene from '~/scenes/Tab1';
import Tab2Scene from '~/scenes/Tab2';
import Tab3Scene from '~/scenes/Tab3';

export default class TabbedScene extends Component {
render() {
const { navigator, scene } = this.props;

return (
navigator={navigator}
scene={scene} >
icon={require('~/images/notifications.png')}
reference={'tab-1'}
component={Tab1Scene} />
icon={require('~/images/chats.png')}
reference={'tab-2'}
component={Tab2Scene} />
icon={require('~/images/profile.png')}
reference={'tab-3'}
component={Tab3Scene} />

);
}
};
`

$3


TabNavigator passes tabNavigator to all of it's scenes. you can set the tab badge number with tabNavigator.setBadge(number).

$3

TabNavigator has some configuration props.
`
const tabNavigatorConfigurationProps = {
// scene reference, defaults to first tab
initialTab: 'tab-2',

// android only, defaults to true
scrollEnabledAndroid: true,

// android only, defaults to 0
pageMarginAndroid: 10,

// android only
tabIndicatorStyleAndroid: {
height: 10, // default 4
bottom: 5, // default 0
backgroundColor: '#f0f', // default #fff
// ...View.style
},

// android only, default 60
tabBarHeightAndroid: 100,

// IOS only, default true
translucentIOS: false,
// both platforms
tabBarTintColor: '#00f', // #hex or rgba
tabTintColor: '#f0f', // #hex or rgba
tabActiveTintColor: '#0f0', // #hex or rgba
badgeColorIOS: '#f0f', //ios >= 10
badgeStyleAndroid: {
padding: 0,
paddingLeft: 2,
paddingRight: 2,
minWidth: 16,
borderRadius: 12,
top: 0,
right: 5,
position: 'absolute',
zIndex: 2,
backgroundColor: '#f0f',
alignItems: 'center',
justifyContent: 'center',
},
badgeTextStyleAndroid: {
color: '#fff',
fontSize: 10,
},
};

navigator={navigator} // will be passed down
scene={scene} // will be passed down
{...tabNavigatorConfigurationProps} >
...

`

Scene

A Scene is used by Navigator and TabNavigator to render your scenes/views

reference={'scene-reference'} - required

The scene reference you use to open a scene with navigator.open()

component={SomeScene} - required

The component the scene will render

$3

The tab bar icon

$3

Selected tab bar icon

$3

Tab title

$3

Tab badge number

$3

The transition when opening or closing a scene with navigator.open()

#### Navigator.transitions
You can configure scene transitions for each individual scene.
##### standard
`
transition={Navigator.transitions.standard}
...
/>
`
##### modal
`
transition={Navigator.transitions.modal}
...
/>
``

##any={prop}
any custom prop will be passed to your scene as well