Routes with undefined parameters

Question

I have a Flatlist where each card directs me to a new screen:

render() {
    return (
        <TouchableWithoutFeedback onPress={
          () => this.props.navigation.navigate('Post', { 
              "title": this.props.item.title, 
              "image": this.props.item.image, 
              "description": this.state.description})
         }>

On my Post screen I call my parameter:

{this.props.navigation.state.params.title}

Which returns me the following error:

TypeError: TypeError: TypeError: 
  undefined is not an object (evaluating 'this.props.navigation.state.params.title')

Answer 1

From what I understand, you can be redirected and these parameters that you sent to the POST route (which you load with this.props.item) are not empty.

If this is right, the problem is that your "Post" screen is not receiving navigation. When you create the routes of your application, the navigation is sent as props to the screens you reported. If for example one of these screens has a component inside, this child component does not inherit navigation.

One way around this would be to use "withNavigation" when exporting your screen. Here’s an example of this.

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class Post extends React.Component {
  render() {
    return (
      <Button
        title="Back"
        onPress={() => {
          this.props.navigation.goBack();
        }}
      />
    );
  }
}

export default withNavigation(Post);

Here is more information:

https://reactnavigation.org/docs/en/connecting-navigation-prop.html

https://reactnavigation.org/docs/en/params.html