ReactNative navigation

Question

I'm having a great deal of trouble implementing a navigation system for my ReactNative app. Here's the index.js:

class Test extends Component { 
  render() {

    const routes = [
      {title: 'LoginScreen', index: 0},
      {title: 'RegisterScreen', index: 1},
    ];

    return (
      <Navigator
        initialRoute={routes[0]}
        initialRouteStack={routes}
        renderScene={(route, navigator) =>
          <TouchableHighlight onPress={() => {
              navigator.push(routes[1]);
            }}>
            <Text>Hello {route.title}!</Text>
          </TouchableHighlight>
        }
        style={{padding: 100}}
        />
    )
  }

}

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {

  } else {

  }
});

At the moment I have simply written a navigation straight from the docs. But I would want it to transition to another screen inside the if statements when checking for a Firebase user. So transitioning to one scene if a user exists and another scene if not. I find the documentation of this very poor, so I can't even build a basic idea of how to modify this method of transitioning (there seem to be endless ways of doing it, sigh..) into working to my situation.

Answer 1

You can definitely use the below example, It hops onto screens by 2 if he found user or hops onto screens by 1.

Assuming user already present

1. index.android.js

import React,{Component} from 'react';
import{
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  Navigator,
  View,
} from 'react-native';
import Navigation from './navigation'

export default class Example extends Component{
  constructor(){
    super();
    this.state={
      username: 'ABC',
    }
  }

  render() {
    var nextIndex
    return (
    <Navigator
    initialRoute={{ title: 'My Initial Scene', index: 0 }}
    renderScene={(route, navigator) =>
      <Navigation
        title={route.title}
        onForward={() => {
            if(this.state.username)
            nextIndex = route.index + 2 ;
            else
            nextIndex = route.index + 1 ;
                      navigator.push({
                        title: 'Scene ' + nextIndex,
                        index: nextIndex,
                      });
                    }}
          onBack={() => {
          if (route.index > 0) {
            navigator.pop();
          }
          }}
          />
    }
    />
);

  }
}


AppRegistry.registerComponent('Example', () => Example);

2. navigation.js

import React,{Component} from 'react';
import{
  StyleSheet,
  Text,
  Navigator,
  TouchableHighlight,
  View,
} from 'react-native';
export default class Navigation extends Component{
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <View>
        <Text>Current Scene: {this.props.title}</Text>
        <TouchableHighlight onPress={this.props.onForward}>
                  <Text>Tap me to load the next scene</Text>
                </TouchableHighlight>
        <TouchableHighlight onPress={this.props.onBack}>
          <Text>Tap me to go back</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

This is the working example for RN 0.40.0