Clash Royale CLAN TAG#URR8PPP

React Native Navigation and navigating to another Screen problem

I have a component LatestAdded.js in HomeScreen.js and when its pressed I want to navigate to another Screen named ProductDetailScreen.js but I am facing a problem when the HomeScreen.js is rendering it navigates directly to ProductDetailScreen.js and if I press the back button and navigate to HomeScreen.js and press the LatestAdded.js Component it shows an error true is not a function (evaluating this.props.viewdetail())

LastedAdded.js

<TouchableWithoutFeedback onPress=() =>
this.props.viewdetail();
>

<View style=
flex: 1,
flexDirection: 'row',
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da', width: 180, padding: 5, marginRight: 5, height: 120
>
<View style=>
<Text style= fontSize: 15, marginTop: 20 > this.props.title</Text>
<Text style= fontSize: 15, fontWeight: '700', marginTop: 10, marginBottom:10 > this.props.author</Text>
<StarRating
disabled=false
maxStars=5
starSize= 10
rating=3
fullStarColor= '#EDC430'
selectedStar=(rating) => this.onStarRatingPress(rating)
/>


</View>
<Image style= width: 80, height: 100, margin: 2 source= uri: this.props.image />

</View>

</TouchableWithoutFeedback>


render methon in HomeScreen.js

renderItem = ( item ) =>
return (
<LatestAdded title=item.pro_name author=item.pro_price image=item.img_path
viewdetail = this.props.navigation.navigate('ProductDetail',pro:item.pro_id) />
)


ProductDetailScreen.js

class ProductDetailScreen extends Component

render()
const navigation = this.props;
const itemId = navigation.getParam('pro', 'none');
return (
<View style=styles.container>
<Text>itemId</Text>
</View>
);



() => this.props.navigation.navigate('ProductDetail',pro:item.pro_id)

1 Answer
1

Your problem is here:

viewdetail = this.props.navigation.navigate('ProductDetail',pro:item.pro_id)


You want to pass a function to be called later but instead you call the function right away

Try this instead:

viewdetail = () => this.props.navigation.navigate('ProductDetail',pro:item.pro_id)


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.