React-Navigation with Login Screen

Question

I am trying to use react-navigation to create a initial LOGIN screen which has no tabbar and header, and once the user has been successfully authenticated will navigate to a

Answer 1

This is my solution based on @parker recommendation:

1. Create a top level navigator and it should be a stack navigator that renders a login screen.
2. Another screen within this top level navigator should be your app's Main-Navigator.
3. When your login state is satisfied, you reset the main stack to just the Main-Navigator.

This code does the bare minimum to accomplish the above.

Create a new react-native project, then copy the code below into index.ios.js and/or index.android.js to see it working.

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  Button
} from 'react-native';
import { StackNavigator, NavigationActions } from 'react-navigation';

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Main' })
  ]
});

class LoginScreen extends Component {
  login() {
    this.props.navigation.dispatch(resetAction);
  }

  render() {
    return  {this.login()}} />;
  }
}

class FeedScreen extends Component {
  render() {
    return This is my main app screen after login;
  }
}

//Create the navigation
const MainNav = StackNavigator({
    Feed: { screen: FeedScreen },
});

const TopLevelNav = StackNavigator({
  Login: { screen: LoginScreen },
  Main: { screen: MainNav },
}, {
  headerMode: 'none',
});


AppRegistry.registerComponent('ReactNav2', () => TopLevelNav);