I have a list of items which i want to pass navigation to it using react native navigation

Question

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?

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