Vfrdtyky

I have a RootNav and a MainNav, in my RootNav i have a login and signup screen. When a user Signs up via firebase with email and password it automatically logs them in so it goes to MainNav. i want to be able to send them to a few screens after they have signed up via firebase like NameScreen and Age Screen so the user inputs their name so i can add this to the firebase database.

I am using stackNavigator.

App.js

import React from 'react';

import {Stylesheet, View, Text} from 'react-native';

import {AppLoading, Asset} from 'expo';

import * as firebase from 'firebase';



import RootNav from './navigation/RootNav';

import MainNav from './navigation/MainNav';



// SplashScreen

import SplashScreen from './screens/SplashScreen'



const firebaseConfig = {

   apiKey: "ProjectKey",

   authDomain: "projectDomain.com",

   databaseURL: "https://URl.com",

   pojectID: "pojectID",



}



export default class App extends React.Component{

  constructor(props){

   super(props);

   this.state = {

     isLoadingComplete: false,

     isAuthenticatingReady: false,

     isAuthenticated: false,

};



SplashScreen.load(v => this.setState({isLoadingComplete: true}));

if (!firebase.apps.length) {

  firebase.initializeApp(firebaseConfig);

}

firebase.auth().onAuthStateChanged(this.onAuthStateChanged);

}





onAuthStateChanged = (user) =>{

  this.setState({isAuthenticatingReady: true});

  this.setState({isAuthenticated: !!user});



}

 render(){

     return (

    <View style={{flex: 1,}}>



      {

        (this.state.isLoadingComplete) ? (this.state.isAuthenticated) ? 

        <MainNav /> : <RootNav /> : <SplashScreen />



      }

    </View>

  )

}

}

MainNav.js

import React from 'react';

import { createStackNavigator,} from 'react-navigation';

import MainScreen from './../screens/MainScreen';

import Check from './../navigation/Check';



const MainNav = createStackNavigator(

  {

     Check: {screen: Check},

     Home: { screen: MainScreen },



  },

  {

     navigationOptions: () => ({

        header: null,

     })

  }

);



export default MainNav;

RootNav.js

import React from 'react';

import { createStackNavigator,} from 'react-navigation';

import LoginScreen from './../screens/auth/LoginScreen';

import SignUpScreen from './../screens/auth/SignUpScreen';

import addNameScreen from '../screens/auth/addNameScreen';

import addAgeScreen from '../screens/auth/addAgeScreen';



const RootNav = createStackNavigator(

  {

    Login: { screen: LoginScreen },

    SignUp: { screen: SignUpScreen },

    addName: {screen: addNameScreen},

    addAge: {screen: addAgeScreen},

  },

  {

    navigationOptions: () => ({

        header: null,

    })

  }

);



export default RootNav;

How would i be able to do this? any indication would help me please thank you.

Can you provide the code for RootNav and MainNav please? Right now it’s hard to tell how you nested the navigators.