Navigating between screens on a TabNavigator with the click of a button in React Native - react-native

Question

I have set up a createMaterialTabNavigator with 4 screens. Each of those screens is a React Native component which accepts 3 properties (image, description, and nextPage). 'nextPage' is an onPress function and I am unable to get it to work.
As a workaround I've made separate components (Highlight1, Highlight2, etc.) and an onPress function in each to be able to navigate between them. But that is a lot of repeated code and that is what I want to avoid.
Below is the code for my TabNavigator where I assign each screen the corresponding React component.
routes.js
createMaterialTopTabNavigator(
{
Page1: {
screen: () => (
<Highlight
image={require('../components/Highlights/images/highlight1.png')}
description={'Description 1'}
nextPage={this.props.navigation.navigate('Page2')}
/>
)
},
Page2: {
screen: () => (
<Highlight
image={require('../components/Highlights/images/highlight2.png')}
description={'Description 2'}
nextPage={this.props.navigation.navigate('Page3')}
/>
)
},
Page3: {
screen: () => (
<Highlight
image={require('../components/Highlights/images/highlight3.png')}
description={'Description 3'}
nextPage={this.props.navigation.navigate('Page4')}
/>
)
},
Page4: {
screen: () => (
<Highlight
image={require('../components/Highlights/images/highlight4.png')}
description={'Description 4'}
/>
)
}
},
{
tabBarPosition: 'bottom',
defaultNavigationOptions: {
tabBarVisible: false
}
}
)
Highlight.js
import React, { Component } from 'react';
import { View, Text, Image, ImageBackground } from 'react-native';
import { NextButton } from '../Buttons';
import styles from './styles';
export default class Highlight extends Component {
render() {
return (
<ImageBackground style={styles.container}>
<Image
style={styles.image}
source={this.props.image}
resizeMode="cover"
/>
<View style={styles.textContainer}>
<Text style={styles.text1}>MYAPP</Text>
<Text style={styles.text2}>Highlights</Text>
<Text style={styles.text3}>{this.props.description}</Text>
</View>
<View style={styles.buttonContainer}>
<NextButton onPress={this.props.nextPage} />
</View>
</ImageBackground>
);
}
}
NextButton.js
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import styles from './styles';
const NextButton = ({ onPress }) => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity style={styles.nextButtonContainer} onPress={onPress}>
<Text style={{ color: 'white', fontSize: 14 }}>NEXT</Text>
</TouchableOpacity>
</View>
);
export default NextButton;
The above spits out the following error -> TypeError: undefined is not an object (evaluating '_this.props.navigation').
How can I get the above to work such that Page1 navigates to Page2, Page2 to Page3, and so on? Additionally, is there a better way to achieve what I am trying to do (which is basically to create a ViewPager consisting of 4 screens)?

Answer 1

The NextButton should be configured as follows:
<NextButton onPress={() => this.props.nextPage} />
const NextButton = (props) => {
const { onPress } = props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity style={styles.nextButtonContainer} onPress={onPress}>
<Text style={{ color: 'white', fontSize: 14 }}>NEXT</Text>
</TouchableOpacity>
</View>
);
};