React Native Navigation Prop Not passing parameters correctly

Question

In my React Native application, I have the following routes in my app.js set up:

export default class App extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
          name="Home"
          component={ItemListing}
          />
          <Stack.Screen
          name="Details"
          component={ItemImageDetails}
          />
        </Stack.Navigator>
    </NavigationContainer>
    )
  }
}

I have a ItemListing component that has multiple ItemImage components that on press should navigate to the Details page which is the ItemImageDetails component by passing in a unique id. These are written in Typescript.

The ItemListing passes the navigation prop to the ItemImage as such:

import { NavigationScreenProp } from 'react-navigation'

...

interface ItemListingProps {
  navigation: NavigationScreenProp<any,any>
}

export default class ItemListing extends Component<ItemListingProps,ItemListingState> {
  constructor (props: ItemListingProps) {
    super(props)
    this.state = {
      results: [],
      searchTerm: ""
    }
  }

  ...

  render() {
    return (
      <>
            <View>
              {this.state.results.map((result,index) =>
                <ItemImage
                  navigation={this.props.navigation}
                  imageMetadata={result.data[0]}
                  imageUrl={result.links[0].href}
                  key={index}

                />
              )}
            </View>
      </>
    )
  }
}

The ItemImage is written as:

import { NavigationScreenProp } from 'react-navigation'

...

interface ItemImageProps {
  navigation: NavigationScreenProp<any,any>
  imageMetadata: ImageMetadata
  imageUrl: string
}

export default class ItemImage extends Component<ItemImageProps,{}> {
  constructor (props: ItemImageProps) {
    super(props)
  }

  render() {
    return (
      <>
        <TouchableOpacity
          onPress={() => 
            this.props.navigation.navigate('Details', { 
              id: this.props.imageMetadata.id
            })
          }
        >
        </TouchableOpacity>
      </>
    )
  }
}

The ItemImageDetails component is as below:

interface ItemImageDetailsProps {
  id: string
}
export default class ItemImageDetails extends Component<ItemImageDetailsProps, {}> {
  constructor (props: ItemImageDetailsProps) {
    super(props)
  }
  
  ...
  
  render() {

    return (
      <>
      <Text>THIS IS THE DETAILS PAGE</Text>
      <Text>{this.props.id}</Text>

      ...
      </>
    )
  }
}

However, the id in the props of the ItemImageDetails is shown as 'undefined' in a console.log. There are no errors and the project builds correctly. The Details page is successfully navigated to and the id is correct in the ItemImage component, it just seems to be passing incorrectly within the navigation prop

Answer 1

you could simply get this id in the ItemImageDetail like below:

const id = this.props.navigation.getParam('id', null);

Answer 2

The interface of your props are wrong. Navigate props are component by navigate and route. inner route there are a property called params so you have to go there if you want to access id. Also I recommend to type your route so you can avoid this kind of issues https://reactnavigation.org/docs/typescript

interface ItemImageDetailsProps {
  navigate: any;
  route: any;
}
export default class ItemImageDetails extends Component<ItemImageDetailsProps, {}> {
  constructor (props: ItemImageDetailsProps) {
    super(props)
  }
  
  ...
  
  render() {

    return (
      <>
      <Text>THIS IS THE DETAILS PAGE</Text>
      <Text>{this.props.route.params.id}</Text>

      ...
      </>
    )
  }
}