Reputation: 81
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
Upvotes: 0
Views: 618
Reputation: 494
you could simply get this id in the ItemImageDetail like below:
const id = this.props.navigation.getParam('id', null);
Upvotes: 0
Reputation: 2478
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>
...
</>
)
}
}
Upvotes: 1