CODEWITHSUNDEEP
react-nativereact-native-navigation
Salman
Salman

Reputation: 389

React Native Navigate to screen outside render

const Card = (props) => {
    return (
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Route')}>
            ...
        </TouchableOpacity>
    );

};


export default class HorizontalList extends Component {
    ...

    render() {
          return (
                <FlatList
                    ...
                    renderItem={({item: rowData}) => {
                        return (
                            <Card
                                thumb_image={rowData.thumb_image}
                                title={rowData.title}
                                innerSubTitle={rowData.innerSubTitle}
                                innerMainTitle={rowData.innerMainTitle}
                            />
                        );
                    }}
                    keyExtractor={(item, index) => String(index)}
                />
            );
    }
}

I want to add a onPress in Card that will open another screen in the app. Constant is declared outside the render and Card is called as a template inside the render function.

Upvotes: 0

Views: 157

Answers (1)

Idan
Idan

Reputation: 4023

Pass navigation to Card

<Card
   navigation={this.props.navigation}
   thumb_image={rowData.thumb_image}
   title={rowData.title}
   innerSubTitle={rowData.innerSubTitle}
   innerMainTitle={rowData.innerMainTitle}
/>

and use like this:

const Card = (props) => {
    return (
        <TouchableOpacity onPress={() => props.navigation.navigate('Route')}>
            ...
        </TouchableOpacity>
    );

};

Upvotes: 1

Related Questions