Undefined is not an object (score "_this2.props.navigation.navigate") - React Native
I really can't get my navigation to work. I am using interactive navigation (StackNavigator).
This is my structure: http://i.imgur.com/IKExx9g.png
My navigation works in HomeScreen.js
: I navigate from HomeScreen.js
to with no problem NewScreen.js
.
App.js:
import React from 'react';
import {
StatusBar, AppRegistry
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {HomeScreen} from './screens/HomeScreen';
import AboutScreen from "./screens/AboutScreen";
import NewScreen from "./screens/NewScreen";
import CalendarScreen from "./screens/CalendarScreen";
import AddAgendaScreen from "./screens/AddAgendaScreen";
const SimpleApp = StackNavigator({
Home: {screen: HomeScreen},
About: {screen: AboutScreen},
New: {screen: NewScreen},
Calendar: {screen: CalendarScreen},
AddAgenda: {screen: AddAgendaScreen}
});
console.disableYellowBox = true;
StatusBar.setHidden(true);
export default SimpleApp; // Export root navigator as the root component
Homescreen.js (working):
export class HomeScreen extends React.Component {
static navigationOptions = ({navigation}) => {
const {state, navigate} = navigation;
return {
title: 'eXopera'
};
};
constructor() {
super();
this.state = {
address: [],
refreshing: false,
page: 1,
lastPage: 1,
loading: true,
listOpacity: 0,
};
}
render() {
return (
<ScrollableTabView style={{backgroundColor: '#fff'}} renderTabBar={() => <DefaultTabBar />}>
<View style={{flex: 1, backgroundColor: '#fff'}} tabLabel="Adressen">
<Button color="#33cd5f" title="NEW"
onPress={() => this.props.navigation.navigate('New') }/>
</View>
</ScrollableTabView>
);
}
}
Then there is another component called CalendarScreen.js (where I also try to navigate to NewScreen.js), even if I completely copy and paste the code from HomeScreen.js, I cannot navigate. It always gives me " undefined is not an object (score" _this2.props.navigation.navigate ") .
I really don't know what I can do now .. Wrestled with this for a long time.
Thanks in advance!
source to share
Besides react-navigation, I also used react-native-scrollable-tab-view .
I solved it by passing in navigation props using tab navigation:
<CalendarScreen navigation={this.props.navigation} tabLabel="Agenda"/>
Then you can access it in other components like this.props.navigation
.
source to share