React native navigation - button on another component

Question

Im building an app and i want to use React-navigation to navigate through the pages, i have two at the moment, HomeScreen and Contact , i built in a form so i had to import the different components into the app.js like the header, and i put the button to navigate inside the ContentContainer component as a image with the TouchableOpacity propertie.

This is causing me to not beign able to pass the param of the navigate buttons to the app.js, when i press a button i get this error:

TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

these are the components where the navigation is involved:

App.js:

import React, { Component } from 'react';
import { StyleSheet, ScrollView, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Header from './app/components/Header';
import Banner from './app/components/Banner';
import ContentContainer from './app/components/ContentContainer';


class HomeScreen extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <Header />
        <Banner />
        <ContentContainer />
        <Button
          title="Go to Details"
          onPress={() => navigation.navigate('Contact')}
        />
      </ScrollView>
    );
  }
}

function Contact() {
  return (
    <ScrollView style={styles.container}>
      <Header />
      <Banner />
    </ScrollView>
  );
}

const Stack = createStackNavigator();

export default function App() {
  console.log('app started');
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Contact" component={Contact} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
}); 

ContentContainer.js:

import React from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';

import CustomImage from './CustomImage';

export default class ContentContainer extends React.Component {
  render() {
    const { navigate } =this.props.navigation;
    return (
        <View style={styles.contentcontainer}>

            <TouchableOpacity style={styles.col2} 
                onPress={() => navigate('Contact')}
            >
                <View >
                    <CustomImage imageSource={require('../img/img2.jpg')}
                        header='Towels'
                    />
                </View>
            </TouchableOpacity>


            <View style={styles.col1}>
                <CustomImage imageSource={require('../img/img3.jpg')}
                    header='Shoes'
                />
            </View>

            <View style={styles.contentBanner}>
                <CustomImage imageSource={require('../img/img1.jpg')}
                    header='Wristwatch'
                    paragraph='This is an example text'
                />
            </View>

            <View style={styles.col1}>
                <CustomImage imageSource={require('../img/img2.jpg')}
                />
            </View>

            <View style={styles.col2}>
                <CustomImage imageSource={require('../img/img3.jpg')}
                />
            </View>

        </View>
    );
  }
}

const styles = StyleSheet.create({
    contentcontainer: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        padding: 5
    },
    col1: {
        flex: 1,
        padding: 5
    },
    col2: {
        flex: 1.4,
        padding: 5
    },
    contentBanner: {
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 5
    }
});

Answer 1

NavigationContext: https://reactnavigation.org/docs/navigation-context/

In react-navigation with version 5, there is no function like withNavigation() , but you can get navigation from the NavigationContext. The example followed:

  componentDidMount() {
    //  Try to get navigation from context
    const navigation = this.context

  }

Answer 2

You can simply pass the navigation prop from HomeScreen to ContentContainer

<ContentContainer navigation={this.props.navigation}/>

The HomeScreen is part of the stack so it will get the navigation prop if you pass it to the children they will also get access to navigation.

If you are having a long tree you can use the 'useNavigation' hook as to avoid passing the prop to multiple levels.