Navigating between screens on a TabNavigator with the click of a button in 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>
    );
};