CODEWITHSUNDEEP
react-nativereact-navigation
01jayss
01jayss

Reputation: 1449

React Navigation - navigating between screens

I'm trying to navigate between screens in React Native, by using React Navigation.

Currently, I have the following. Note that EmployeeStack is nested inside of RootStack.

RootStack.js:

import LoginForm from '../components/LoginForm';
import EmployeeStack from './EmployeeStack';
import { StackNavigator } from 'react-navigation';

const routes = {
    Home: {screen: LoginForm},
    EmployeeList: {screen: EmployeeStack}
};

const options = {
    initialRouteName: 'Home'
};

const RootStack = StackNavigator(routes, options);

export default RootStack;

EmployeeStack.js:

import EmployeeList from '../components/EmployeeList';
import AnotherScreen from '../components/AnotherScreen';
import { StackNavigator } from 'react-navigation';

const routes = {
    EmployeeList: {screen: EmployeeList},
    AnotherScreen: {screen: AnotherScreen},
};

const options = {
    initialRouteName: 'EmployeeList'
};

const EmployeeStack = StackNavigator(routes, options);

export default EmployeeStack;

In EmployeeList.js, I have a button that does this: 

<Button 
    onPress={() => this.props.navigation.navigate('AnotherScreen')}
    title="Go123"
    color="#841584"
/>

This button does not navigate to AnotherScreen when pressed. Interestingly though, if I change the navigate argument to 'EmployeeList' or 'Home', it navigates to those screens properly.

How can I navigate to AnotherScreen?

Upvotes: 0

Views: 356

Answers (1)

Kartik Lekhi
Kartik Lekhi

Reputation: 1

In order to navigate between screens from login -> home screen you need to define separate navigation. Use primary navigation as common for other navigations 

import HomeScreen from "../screens/user/Home";
import LoginScreen from "../screens/Login";
import ContactScreen from "../screens/Contact";
import LogoutScreen from "../screens/Logout";



........
const LoginStack = StackNavigator({
  loginScreen: { screen: LoginScreen },
 // signupScreen: { screen: SignupScreen },
     // forgottenPasswordScreen: { screen: ForgottenPasswordScreen, navigationOptions: { title: 'Forgot Password' } }
    }, {
      headerMode: 'none',
      navigationOptions: {        
        headerVisible: false,
        gesturesEnabled: false,
      }
 })

const HomeNavigation = StackNavigator({
  HomeStack: { screen: HomeStack }
}, {
  headerMode: 'float',
  navigationOptions: ({navigation}) => ({
    gesturesEnabled: false,
    headerStyle: {backgroundColor: '#29B1FC'},
    headerTintColor: '#ffffff',  
  }),
})
const HomeStack = DrawerNavigator({
  HomeScreen: { screen: HomeScreen },
  ContactScreen: { screen: ContactScreen },
  LogoutScreen: { screen: LogoutScreen },
  },  
  {
      contentOptions: {
        activeTintColor: 'black',
        activeBackgroundColor : 'transparent',
        inactiveTintColor : 'black',
        itemsContainerStyle: {
          marginVertical: 0,
        },
        iconContainerStyle: {
          opacity: 1,
        },
        itemStyle :{
          height : 50,
        }
      },
      }

 )


const PrimaryNav = StackNavigator({
  loginStack: { screen: LoginStack },
  HomeStack: { screen: HomeNavigation },
}, {
  // Default config for all screens
  headerMode: 'none',
  title: 'Main',  
  initialRouteName: 'loginStack'
})
export default PrimaryNav
........

And your button press will work like this 

<Button 
onPress={() => this.props.navigation.navigate('HomeStack')} 
//HomeStack = navigation of PrimaryNav 
    title="Go123"
    color="#841584"
/>

Upvotes: 0

Related Questions