The routers Is not working, I tryed many forms but not worked, can someone help me?
the following error is: Device: (487:41) undefined is not an object (evaluating '_this2.props.navigation.navigate')
import { createDrawerNavigator, createAppContainer } from "react-navigation";
import Noturno from './containerNoturno.js';
import Linhas from './Linhas.js';
import LSaida from './LinhasSaida.js';
import Main from './containerDiurno.js';
import Ajuda from './Ajuda.js';
import Sobre from './sobre.js';
import Intro from './intro.js';
import GalopolisSantaCoronaNoturno from './Noturno/GalopolisSantaCorona.js';
const AppNavigator = createDrawerNavigator({
Menu: { screen: Main },
Noturno: { screen: Noturno },
Linhas: { screen: Linhas },
Linhas_Saida: { screen: LSaida },
Ajuda: { screen: Ajuda },
Sobre: { screen: Sobre },
Galopolis_Noturno: { screen: GalopolisSantaCoronaNoturno },
});
export default createAppContainer(AppNavigator);
here is the other code:
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Noturno')}
style={styles.fab}>
<Image
source={require('../assets/noite.png')}
style={{ width: 50, height: 50 }}
/>
</TouchableOpacity>
Please open the follow link and help me...
You are accessing the navigation prop in child component "Noturno.js" which is not part of StackNavigator
You can access the prop like this (Access the navigation prop from any component)
Update file "Noturno.js"
import { withNavigation } from 'react-navigation';
....
class App extends React.Component
....
export default withNavigation(App);
Related
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"
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.
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
I have created customized sidebar and have 5 to 6 screens. I am using NativeBase and want to open Sidebar with DrawerNavigator option but when I applied following code it was getting issue.
Drawer Navigator code
import React, { Component } from "react";
import WelcomeScreen from './screens/WelcomeScreen';
import ContactScreen from './screens/ContactScreen';
import DepartmentScreen from './screens/DepartmentScreen';
import EmailServiceScreen from './screens/EmailServiceScreen';
import MoreScreen from './screens/MoreScreen';
import SideBar from "./SideBar.js";
import { DrawerNavigator } from "react-navigation";
const SidebarNavigator = DrawerNavigator(
{
Home: { screen: WelcomeScreen },
Contact: { screen: ContactScreen },
Department: { screen: DepartmentScreen },
EmailService: { screen: EmailServiceScreen },
More: { screen: MoreScreen }
},
{
contentComponent: props => <SideBar {...props} />
}
);
export default SidebarNavigator;
Calling them in APP.Js as propos. See following code from APP.JS
import SidebarNavigator from './src/SidebarNavigator';
class App extends Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={createStore(reducers)}>
<Root>
<Router /> // It's a stack navigator which is working fine
<SidebarNavigator />
</Root>
</Provider>
);
}
}
console.disableYellowBox = true;
export default App;
The error here is that you are using DrawerNavigation instead of createDrawerNavigator.
Just do those changes and you should be good
import { createDrawerNavigator } from "react-navigation";
...
const SidebarNavigator = createDrawerNavigator( ... )
Source: https://reactnavigation.org/docs/en/drawer-navigator.html
You can try this code
You can use createDrawerNavigator and createAppContainer
import { createDrawerNavigator, createAppContainer } from "react-navigation";
...
const SidebarNavigator = createDrawerNavigator( ... )
const AppContainer = createAppContainer(SidebarNavigator);
// Now AppContainer is the main component for React to render
export default AppContainer;
I got react native app with such structure:
./App.js
./screens/AppNavigator.js
./screens/SignInScreen.js
./screens/HomeScreen.js
./screens/FavoritesScreen.js
App.js:
import { createAppContainer } from "react-navigation";
import AppNavigator from './screens/AppNavigator';
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return (
<View>
<AppContainer/>
</View>
);
}
}
screens/AppNavigator.js:
import { createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
import SignInScreen from './SignInScreen';
import HomeScreen from './HomeScreen';
import FavoritesScreen from './FavoritesScreen';
const AppBottomTabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen
},
Favorites: {
screen: FavoritesScreen
}
},
{
initialRouteName: 'Home',
});
export default createSwitchNavigator(
{
App: AppBottomTabNavigator,
Auth: SignInScreen
},
{
initialRouteName: 'SignInScreen',
}
);
screens/SignInScreen.js:
export default class SignInScreen extends React.Component {
render() {
return (
<View>
<Button title="Continue w/o sing in..." onPress={this.toApp} />
</View>
);
}
toApp = () => {
this.props.navigation.navigate('App'); // from here I try to navigate to Home screen
};
}
And when I try to navigate to HomeScreen from SignInScreen I see white screen instead of HomeScreen, though all other navigation works well.
The problem do not occur if in screens/AppNavigator.js I change createBottomTabNavigator to createSwitchNavigator, got no idea why. A problem also do not appear if in screens/AppNavigator.js I navigate direct to HomeScreen or FavoritesScreen instead of AppBottomTabNavigator.
I found this thread on github, but, as I understand, it's not related for me, because both AppBottomTabNavigator and SignInScreen are childs of AppNavigator.
So, what is weong with my code?
The problem is in de App.js. For some reason you can't put a BottomTabNavitation inside a View Component, so remove. Like this:
export default class App extends React.Component {
render() {
return (
<AppContainer/>
);
}
}
You should also change the parameter initialRoutName in createSwitchNavigator. You have to put the routName, in this case Auth.
export default createSwitchNavigator(
{
App: AppBottomTabNavigator,
Auth: SignInScreen
},
{
initialRouteName: 'Auth',
}
);
Good day.
I tried navigating to another page using reactnative navigation but it is displaying "Undefined is not an object (Evaluating this.props.navigation.navigate) in reactnative"
This is my code
import React, { Component } from 'react';
import {Text, View, Image, Alert} from 'react-native';
import { Icon, Button, List, ListItem, Left, Thumbnail, Body, Right } from 'native-base';
import {styles} from '../../../css/Designs';
import OptionsMenu from "react-native-options-menu";
const myIcon = (<Icon name='more' style={{fontSize:30,color:'#000'}}/>);
export class TheStudent extends Component {
constructor(props) {
super(props);
};
editItem = (student) => {
this.props.navigation.navigate('AllStudents');
}
deleteItem = (student) => {
Alert.alert(
'',
'Delete student?',
[
{
text: 'No',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'Yes',
onPress: () => this.deleteTheItem(student)
},
],
{cancelable: false},
);
}
deleteTheItem = (student) => {
alert(student);
}
render() {
return(
<List>
<ListItem avatar>
<Left>
<Thumbnail source={require('../../../img/male_avatar.png')} />
</Left>
<Body>
<Text style={styles.userName}>{this.props.surname} {this.props.firstname} {this.props.middlename} </Text>
<Text>{this.props.matric} {this.props.level}L {this.props.phone}</Text>
</Body>
<Right>
<OptionsMenu
customButton={myIcon}
options={["Edit", "Delete"]}
actions={[this.editItem.bind(this,this.props.id), this.deleteItem.bind(this,this.props.id)]}/>
</Right>
</ListItem>
</List>
);
}
}
I have been stucked in this for hours and I have tried all the other links I saw on this issue, but all to no avail.
I will be glad if you can be of help.
Thanks.
You should wrap your component with the HOC withNavigation then the prop will be available in the component, try something like this:
import { withNavigation } from 'react-navigation';
class TheStudent extends Component {
....
}
export withNavigation(TheStudent)
This is one solution which #Rachid Rhafour mentioned in his answer.
You can export your component withNavigation which can import from react-navigation.
import { withNavigation } from 'react-navigation';
class YourClassName extends Component {
}
export withNavigation(YourClassName)
Another approach is you can make route file by which you can navigate to any component file without any trouble.
example:
if there is two or three component to navigate or from navigate you should maintain that route by route file.
import React from "react";
import { createStackNavigator, createAppContainer } from "react-navigation";
import ScreenOne from "./ScreenOne";
import ScreenTwo from "./ScreenTwo";
const AppNavigator = createStackNavigator({
Home: {
screen: ScreenOne
},
Profile: {
screen: ScreenTwo
}
});
export default createAppContainer(AppNavigator);
Dependencies version:
"dependencies": {
"react": "16.3.1",
"react-native": "~0.55.2",
"react-navigation": "^2.0.1",
}
I use react-navigation to navigate my screen, i create two screen and a drawer
Router.js:
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import MainActivity from './components/MainActivity';
import ThisWeek from './components/ThisWeek';
import DrawerPanel from './components/DrawerPanel';
const Stack = createStackNavigator({
MainActivity: {
screen: MainActivity,
navigationOptions: {
title: 'Welcome',
headerStyle: {
backgroundColor: '#81A3A7',
elevation: null
}
}
},
ThisWeek: {
screen: ThisWeek
}
},
{
initialRouteName: 'MainActivity'
}
);
const Router = createDrawerNavigator({
FirstScreen: {
screen: Stack
}
},
{
contentComponent: DrawerPanel,
drawerWidth: 200
});
export default Router;
In my DrawerPanel.js i can click the two button navigate to the screen, but when i try to use this.props.navigation.closeDrawer(); that shows an error _this2.props.navigation.closeDrawer is not a function.
So i try to console.log(this.props);,i can see openDrawer and closeDrawer under navigation
Here is my DrawerPanel.js:
import React, { Component } from 'react';
import { ScrollView, FlatList, Text } from 'react-native';
import { View } from 'react-native-animatable';
import { List, Button } from 'react-native-elements';
class DrawerPanel extends Component {
render() {
console.log(this.props);
return (
<ScrollView style={{ backgroundColor: '#81A3A7' }}>
<Button
onPress={() => {
this.props.navigation.actions.closeDrawer();
this.props.navigation.navigate('MainActivity');
}}
backgroundColor={'#81A3A7'}
containerViewStyle={{ width: '100%', marginLeft: -61 }}
title='Main page'
/>
<Button
onPress={() => this.props.navigation.navigate('ThisWeek')}
backgroundColor={'#81A3A7'}
containerViewStyle={{ width: '100%', marginLeft: -46 }}
title='This weel'
/>
</ScrollView>
);
}
}
export default DrawerPanel;
I can't figure it out why i can use this.props.navigation.navigate(); to another screen not allow to use this.props.navigation.closeDrawer();
I try make a change to use this.props.navigation.actions.closeDrawer(); the error will show Cannot read property 'closeDrawer' of undefined.
What step i make it wrong ? Any help would be appreciated. Thanks in advance.
Try this
import { DrawerActions } from 'react-navigation';
this.props.navigation.dispatch(DrawerActions.closeDrawer());
this.props.navigation.dispatch(DrawerActions.openDrawer());
You are using both StackNavigator and DrawrNavigator so that the way to use them is different a little bit.
Keep in mind we have two version for react-navigation (v1 and v2) for now so that you should read the documentation carefully.
Please try using this:
Close drawer
this.props.navigation.navigate('DrawerClose'); // for version 1
this.props.navigation.openDrawer(); // for version 2
Open drawer:
this.props.navigation.navigate('DrawerOpen'); // for version 1
this.props.navigation.closeDrawer(); // for version 2
Be careful for reference any bugs fix for this libraries on the internet which you have to know which version is using in.
Note that the order of nesting - if the stack navigator is not inside of the drawer, it will not have the openDrawer function.
I guess it will work for you in this case.
Cheer!
In your DrawerPanel file. You did not use the constructor. Hence, your component's props did not know about the navigation props that the DrawerNavigator passed in. Try putting this before your render function in the component.
constructor(props){
super(props);
}
This way you will no longer need to use dispatch(), but instead use openDrawer() and closeDrawer().