Navigator Trouble

Question

Good afternoon, actually i m keeping error while try to navigate.

This is my App.js

import { createStackNavigator, createAppContainer } from "react-navigation"; import Login from './src/Login'; import NuovoAccount from './src/NuovoAccount'; import HomePage from './src/HomePage'; import Lista_Sveglie from './src/Lista_Sveglie'; import NuovoAccount_2 from './src/NuovoAccount_2'; import Nuova_sveglia from './src/Nuova_sveglia'; import ScreenSveglia from './src/ScreenSveglia'; import Registra from './src/Registra'; import temp from './src/temp'; import Account from './src/Menu/Account'; import ElencoUtenti from './src/Menu/ElencoUtenti'; import MenuImpostazioni from './src/Menu/MenuImpostazioni'; import SelUtenteDest from './src/Menu/SelUtenteDest' import Accedi from './src/Accedi' import Landing from './Landing' const AppNavigator = createStackNavigator( { Home: Landing, Accedi : Accedi , Login: Login, NuovoAccount: NuovoAccount, HomePage: HomePage, Lista_Sveglie: Lista_Sveglie, NuovoAccount_2: NuovoAccount_2, Nuova_sveglia: Nuova_sveglia, ScreenSveglia: ScreenSveglia, Registra: Registra, temp: temp, MenuImpostazioni: MenuImpostazioni, ElencoUtenti: ElencoUtenti, Account: Account, SelUtenteDest: SelUtenteDest, }, { initialRouteName: "Home", defaultNavigationOptions: { headerTintColor: '#ccc', headerStyle: { borderBottomWidth: 4, borderBottomColor: '#80ba27', backgroundColor: '#364054', }, headerTitleStyle: { textAlign: 'center', flex: 1 }, } } ); export default createAppContainer(AppNavigator)

and here my Landing.js

import React, { Component } from 'react'; import { StyleSheet, Text, View, Alert, Button } from 'react-native'; import * as firebase from 'firebase'; import HomePage from './src/HomePage'; import Accedi from './src/Accedi' import { createStackNavigator, createAppContainer } from "react-navigation"; export default class Landing extends Component { constructor() { super(); this.state = { loggedIn: false, } } componentWillMount() { console.log("QUI ENTRA") ---some firebase config ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.auth().onAuthStateChanged((user) => { if (user) { this.setState({ loggedIn: true }) } else { this.setState({ loggedIn: false }) } }) } render(){ if (this.state.loggedIn){ return <HomePage/> }else{ return <Accedi/> } } }

Here my HomePage

<View> <Text onPress={() => this.props.navigation.navigate('MenuImpostazioni')} style={style.footer_text_icone}>Configura Impostazioni</Text> </View>

Can anyone tell me how to fix it and explain why this error ? from documentation i saw this.props. is created on createnavigator function

"undefined is not an object - this.prop.navigation.navigate"

Auticcat · Accepted Answer · 2019-09-19 16:44:00Z

The problem here is that your HomePage component isn't a direct child of your stackNavigator. You need to pass it trough props to your child component doing:

 render(){ if (this.state.loggedIn){ return <HomePage navigation={this.props.navigation}/> }else{ return <Accedi/> } }

Inside the render function of your Landing.js

Then your child component will have access to it.

This is happening because you are using the same component, both as screen that as child component.

{ Home: Landing, //Here (as child) Accedi : Accedi , Login: Login, NuovoAccount: NuovoAccount, HomePage: HomePage, //Here Lista_Sveglie: Lista_Sveglie, NuovoAccount_2: NuovoAccount_2, Nuova_sveglia: Nuova_sveglia, ScreenSveglia: ScreenSveglia, Registra: Registra, temp: temp, MenuImpostazioni: MenuImpostazioni, ElencoUtenti: ElencoUtenti, Account: Account, SelUtenteDest: SelUtenteDest, }

react-navigation doesn't give access to navigation to a component just because it has been declared inside of it. By doing that if/else you are actually creating a whole new instance of that same component, with the only difference that it do not have access to this.props.navigation.

Thanks ! Navigation work ! but still trouble in header of this 2 pages. ``` static navigationOptions = () => { return { title: 'Centrale', headerRight: <View />, }; }; ```
Vedo che sei di Roma , è possibile avere una mail per contattarti ? Grazie @Auticcat

Zaytri · Accepted Answer · 2019-09-19 16:33:07Z

Landing.js isn't a screen that is defined within your stack navigator, so it does not have access to this.props.navigation.

If you don't want Landing.js within the stack navigator, you can follow this tutorial to use navigate and other navigation actions from any component: https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

Collectives™ on Stack Overflow

Navigator Trouble

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related