How to Send data from from one components flat-list to another component in react native

user_6005809 0
Viewed 172

Categories.js

 <FlatList
            data={categorylist}
            keyExtractor={(item, index) => item.tc_id}
            vertical
            numColumns={4}
            renderItem={({ item, index }) => {
              return (
                <Pressable onPress={subcat}>
                <View style={styles.catLayout}>
                  <View style={styles.imageLayout}>
                    <Image source={{ uri: item.image }} style={styles.image}
                     />
                  </View>

                  <Text style={styles.productname}>
                    {item.name != null ? item.name : ""}
                  </Text>
                  <Text>{item.uuid}</Text>
                </View>
                </Pressable>
                );
            }}
          />

I am getting data from categorylist array , i am displaying a bunch of items of categories here , i want show different sub-categories depending on each items "uuid". I want to send the {item.uuid} to subcategories screen and reuse it in there.

react-native
1 Answers

As you are displaying the data on the view using flatlist you have onPress after clicking on any item you just need to send the data

Screen (A)

  <FlatList
        data={categorylist}
        keyExtractor={(item, index) => item.tc_id}
        vertical
        numColumns={4}
        renderItem={({ item, index }) => {
          return (
            <Pressable onPress={() => navigation.navigate('subcategories',{uuid:item.uuid}) }>
            <View style={styles.catLayout}>
              <View style={styles.imageLayout}>
                <Image source={{ uri: item.image }} style={styles.image}
                 />
              </View>

              <Text style={styles.productname}>
                {item.name != null ? item.name : ""}
              </Text>
              <Text>{item.uuid}</Text>
            </View>
            </Pressable>
            );
        }}
      />

Screen (B)

you can get it like this

class component

 constructor(props) {
     super(props);
     this.state = {
       uuID: this.props.navigation.state.params.uuid,
     }
 }

functional component

const Subcategory = (props) => {
const [uUID, setuUID] = useState(props.route.params.uuid);
user_160836540
Related