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
    }
});

Guruparan Giritharan · Accepted Answer · 2020-10-13 04:56:36Z

1

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.

answered Oct 13, 2020 at 4:56

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Squall32 Over a year ago

Yes! thank you, this solved my problem, i only had to include your code and now the app works perfectly, thanks for the advice in useNavigation too. I was too bussy with so many things that i forgot that in the end, you can pass the props in that way to the components.

Jerry · Accepted Answer · 2020-10-13 02:38:37Z

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

  }

answered Oct 13, 2020 at 2:38

Jerry

112 bronze badges

Collectives™ on Stack Overflow

React native navigation - button on another component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related