ReactNative navigation

Issue

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.

Solution

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

Answered By - Neel Gala