thram / react-native-thrux-router

Router for React Native using Thrux

React Native - Thrux Router

Router using Thrux state manager.

TODO Docs, for now just an Example:

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>
    );
  }
}