CODEWITHSUNDEEP
react-native
Μα ίρη
Μα ίρη

Reputation: 13

navigate to a different screen for each item

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.

Upvotes: 0

Views: 553

Answers (1)

angelos_lex
angelos_lex

Reputation: 1661

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)}

Upvotes: 1

Related Questions