2

I have a list of items which i want to pass navigation to it using react native navigation, here is my main code,

import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Image } from 'react-native'
import ItemComponent from './ItemComponent'

const ItemDescription = ({navigation}) => {
    return (
        <View style={styles.container}>
            <ScrollView style={{marginBottom: '15%'}}>
               <ItemComponent title='Shirts' 
               imageSource={require('../Screen/Images/Shirt.png')}
               />

              <ItemComponent  title="T-Shirt"
                imageSource={require('../Screen/Images/t-shirt.png')}
              /> 
            </ScrollView>
       </View>
    )
}

Which part of the code do I need to use navigation and how do I pass any props on it?

firats
  • 496
  • 2
  • 7
Yashas Km
  • 23
  • 4
  • can you edit your post and leave your navigations , pages you want to navigate and the component you are using? – Amir Doreh Jul 28 '20 at 05:55
  • For each component out there i want to pass a navigation based on its title... For example title of watch should go to watch screen where diffrent watches are showcased and shirts to shirts – Yashas Km Jul 28 '20 at 06:01

1 Answers1

1

If you are forced to use a totally new screen for the page thats ok ,but if your navigated screen shares most parts its recommend using props.

If you want to navigate according to the coming props , there are two approaches you can use :

  1. handle it from outside of the component before using the component

2.in your component with a function decide which screen you want to navigate to(which i recommend)

    const ItemComponent = ({title, imageSource, navigation}) => { 
function whatis(){
 if(title === "pant"){
 return "NameOFScreenYouWantToNavigate"
}
}
return (
    
        <View style={styles.touchcontainer}>
            <TouchableOpacity style={styles.touchables}
            onPress={()=>{navigation.navigate(whatis())}}
             >
               
                    <Text style={styles.textStyles}>{title}</Text>
                
    
                
                    <Image source={imageSource} style={styles.imageStyle} />
                
              
                
    
            </TouchableOpacity>
    
         </View>
            
        </View>
    )
    }
Amir Doreh
  • 1,369
  • 1
  • 13
  • 25
  • Can you elaborate a bit please. I i quite didnt get it. I'm learning everything on my own so would request for a bit more help. – Yashas Km Jul 28 '20 at 06:51
  • share your codes from git, and leave a link here, i will edit your codes and you will get it totally – Amir Doreh Jul 28 '20 at 06:55
  • So i should carry out the same process for every component right – Yashas Km Jul 30 '20 at 05:09
  • you need to restructure some part of the app . but you need to pass from parent to child! and for storing diffrent datas in diffrent pages you need to use state managers such as MobX Redux or .. – Amir Doreh Jul 30 '20 at 05:27