CODEWITHSUNDEEP
react-nativereact-navigation
SmsRk
SmsRk

Reputation: 13

got this.props.navigation.navigate error in onpress

renderItemTop ({item}) {
    return (
        <TouchableOpacity
        onPress={()=>this.props.navigation.navigate('DetailUpMovie')}
            >
            <Card
            containerStyle={stylesTop.ImageCardStyle}
            image={{ uri: `${BASE_IMAGE_URL}original${item.poster_path}` }}
            imageStyle={{ width: CardWidthTop, height: CardHeightTop }}
            imageProps={{ borderRadius: 15, resizeMode:'stretch' }}
            />
        </TouchableOpacity>
    );
}

render () {
    const { data } = this.state;
    return (
        <View style={stylesTop.ViewTopstyle}>

            <View style={stylesTop.InnerViewstyle}>
                <Text style={stylesTop.TitleTopStyle}>Top Rated Movie</Text>
                <Button
                buttonStyle={stylesTop.btnStyle}
                title='More'
                titleStyle={stylesTop.btnTitleStyle}
                type='clear'
                />
            </View>

            <FlatList 
                data={data}
                renderItem={this.renderItemTop}

                keyExtractor={item => item.id}
                showsHorizontalScrollIndicator={false}
                horizontal={true}
                marginTop={5}
                marginLeft={10}
                marginRight={10}
                marginBottom={5}
            />
        </View>

    );
}

this is where i want navigate to other screen in renderitem fuction but when i press on the item to navigate o got error tis.props.navigation.navigate undefined is not an object in another class i make all stack and bottomnavigator please help

Upvotes: 1

Views: 70

Answers (1)

MoKhajavi75
MoKhajavi75

Reputation: 2702

You can pass the navigation prop to your custom component via something like this:

You just need to pass the navigation prop to function to access the navigation action

const MyComponent = props => {
    const { item, navigation } = props

    return (
        <TouchableOpacity
        onPress={() => navigation.navigate('DetailUpMovie')}
            >
            <Card
            containerStyle={stylesTop.ImageCardStyle}
            image={{ uri: `${BASE_IMAGE_URL}original${item.poster_path}` }}
            imageStyle={{ width: CardWidthTop, height: CardHeightTop }}
            imageProps={{ borderRadius: 15, resizeMode:'stretch' }}
            />
        </TouchableOpacity>
    );
}

...

<FlatList 
  data={data}
  renderItem={({item}) => (
    <MyComponent item={item} navigation={this.props.navigation} />
  )}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  horizontal={true}
  marginTop={5}
  marginLeft={10}
  marginRight={10}
  marginBottom={5}
/>

Upvotes: 1

Related Questions