Trouble passing down this.props.navigation to child components - react-native

Question

I am having a little trouble accessing this.props.navigation.navigate in child pages within ViewPager. I have a page where there's a button called "Details" and upon clicking the button it should open up a new separate view (like a new Intent Activity).
Structure is:
Login page -> tap on "login" button -> opens MainPage having a custom CustomBottomNavigationBar with ViewPager component which takes {Object} of 5 different pages and renders them like:
In the root App.js I've already defined this configuration:
// App.js
import MainPage from './views/mainpage';
import PageOne from './views/pageoneview';
import PageTwo from './views/pagetwoview';
import PageOneDetailView from './views/PageOneDetailView';
const MainNavigator = createStackNavigator({
Home: {screen: MainPage},
PageOne: {screen: PageOne},
PageTwo: {screen: PageTwo},
PageOneDetailView: {screen: PageOneDetailView}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
// mainpage.js
import React, { Component } from 'react';
import {
StyleSheet,
Image,
View,
TouchableOpacity,
ToastAndroid
} from 'react-native';
import PageOne from './homepages/pageoneview';
import PageTwo from './homepages/pagetwoview';
import CustomBottomNavigationBar from './../components/CustomBottomNavigationBar';
export default MainPage extends Component {
constructor(props) {
super(props);
}
screens = () => {
return {
p1: {page: <PageOne/>},
p2: {page: <PageTwo/>}
}
}
render() {
return (
<CustomBottomNavigationBar
screensets={this.screens()}
/>
);
}
}
Now in PageOne.js there is a button called "Details" and on tapping, it must open a new PageOneDetail.js
// pageoneview.js
import React, { Component } from 'react';
import {
StyleSheet,
Image,
View,
TouchableOpacity,
ToastAndroid
} from 'react-native';
import PageOneDetail from './homepages/PageOneDetailView';
export default PageOne extends Component {
constructor(props) {
super(props);
}
OpenView = (navigateObject, whichScreen) => {
navigateObject(whichScreen);
}
render() {
const {navigate} = this.props.navigation;
return (
<View style={{ flex: 1, alignSelf: 'flex-end' }}>
<TouchableOpacity onPress={() => this.OpenView(navigate, 'PageOneDetailView')}>
<Text> Details </Text>
</TouchableOpacity>
</View>
);
}
}
The error I get when I land on the MainPage is: undefined is not an object this.props.navigation.navigate when mainpage.js tries to load pageoneview.js
Please help me understanding how to fix this issue which I have been facing whole day.
Thanks.

Answer 1

The navigation prop is only accessible to screens, not children of those screens. You can pass down the navigation from the parent or use withNavigation HOC or useNavigation hook from react-navigation-hooks to access it everywhere.