Router using Thrux state manager.
index.js
import Router from "react-native-thrux-router";
import React, {Component} from 'react';
import First from "./First";
import Second from "./Second";
const styleBarWhite = Platform.OS === 'android' ? {barStyle: "light-content", backgroundColor: 'rgba(0,0,0,.3)'} : {barStyle: "dark-content"};
const styleBarDark = assign({barStyle: "light-content"}, Platform.OS === 'android' ? {backgroundColor: '#414141'} : {});
const routes = [
{id: 'first', title: 'First Scene', component: First, next: 'second'},
{id: 'second', title: 'Second Scene', component: Second, replace: true, statusBar: styleBarDark},
{id: 'third', title: 'Third Scene', component: Second, next: 'forth'},
{id: 'forth', title: 'Forth Scene', component: First}
];
export default class NavigationExample extends Component {
render = () => (<Router routes={routes} hideNav statusBar={styleBarWhite}/>)
}
First.js
import React, {Component} from 'react';
import {Text, View, TouchableOpacity} from 'react-native';
import {goNextRoute, goBack} from "react-native-thrux-router";
export default class First extends Component {
render() {
return (
<View style={{flex:1, backgroundColor:'#AAEE00', justifyContent:'center'}}>
<TouchableOpacity onPress={goNextRoute}>
<Text>Navigate to second screen</Text>
</TouchableOpacity>
<TouchableOpacity onPress={goBack}>
<Text>Back</Text>
</TouchableOpacity>
</View>
);
}
}
Second.js
import React, {Component} from 'react';
import {Text, View, TouchableOpacity} from 'react-native';
import {goRoute, goBack, openModal} from "react-native-thrux-router";
import ThirdModal from './ThirdModal';
export default class Second extends Component {
render() {
return (
<View style={{flex:1, backgroundColor:'#EEAA00', justifyContent:'center'}}>
<TouchableOpacity onPress={()=> goRoute('third')}>
<Text> Second screen </Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=> openModal({component:ThirdModal})}>
<Text> Open Modal</Text>
</TouchableOpacity>
<TouchableOpacity onPress={goBack}>
<Text> Back</Text>
</TouchableOpacity>
</View>
);
}
}
ThirdModal.js
import React, {Component} from 'react';
import {Text, View, TouchableOpacity} from 'react-native';
import {closeModal} from "react-native-thrux-router";
export default class ThirdModal extends Component {
render() {
return (
<View style={{flex:1, backgroundColor:'#EEAA00', justifyContent:'center'}}>
<Text> This is a Modal </Text>
<TouchableOpacity onPress={closeModal}>
<Text> Back</Text>
</TouchableOpacity>
</View>
);
}
}