navigate to a different screen for each item - react-native

Question

Hi I hope to find the answer here, this is my code I used a list item and the navigation worked but all the items go to one screen I want to know how to make each one to go to a different screen and I didn't know how to do it I am new in React native programming
import React, { Component } from 'react'; import {Image , StyleSheet,
View, Text, Button } from 'react-native';
import { ListItem, Icon }from 'react-native-elements';
import { StackNavigator } from 'react-navigation';
import call from 'react-native-phone-call';
class First extends Component {
render() { let pic = {
uri: 'https://www.lscoiffure.fr/images/assistance.jpg' };
return (
<View style={styles.container}>
<View>
<Image source={pic} style={{width: 350, height: 200}}
/>
<View style={{position: 'absolute', left: 0, right: 0, bottom: 0, justifyContent: 'center',marginBottom:20, alignItems: 'center'}}>
<Text style={{color :'#ffffff',fontSize:24}}>Assistance</Text> </View> </View>
{
list.map((item, i) => (
<ListItem
key={i}
title={item.title}
titleStyle={{ color: 'black' }}
chevronColor="black"
leftIcon={{ name: item.icon ,color:'black'}}
onPress={() => this.props.navigation.navigate('HomeScreen')}
/>
))
}
</View>
);
}
}
const list = [
{
title: 'Appeler le service clientèle',
icon: 'perm-phone-msg',
},
{
title: 'FAQ',
icon: 'help',
}, {
title: 'Conditions et mentions légal',
icon :'error',
},
]
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'#ffffff'
},
})
export default FirstActivity;
I want to know how to use onPress with condition or any solution you suggest.

Answer 1

Change your list, so that every item in your list contains the page you want to navigate like i do below:
const list = [{
title: 'Appeler le service clientèle',
icon: 'perm-phone-msg',
page: 'HomeScreen'
},
{
title: 'FAQ',
icon: 'help',
page: 'OtherScreen'
}, {
title: 'Conditions et mentions légal',
icon: 'error',
page: 'OtherOtherScreen'
},
]
And then in your navigate method use this page:
onPress={() => this.props.navigation.navigate(item.page)}