-2

I'm new in React Native and I've FlatList with some items I want to use code like when I click any item on the flat list a screen open and shows data of that item related.When I click on another item same screen open but with data related to that item.Means resuability.

Zaid Qureshi
  • 611
  • 10
  • 19
  • there are multiple ways you can do it, using navigations params, using redux, etc. Can you be give more details how you are going to another screen? small code snippets will be helpful. – Freddy Sep 02 '19 at 05:31

3 Answers3

0

You have to get the values in renderItem. renderItem is called for each and every item flatlist renders and simultaneously you will get the index also of each item.

   <FlatList
          style={styles.FlatListStyle}
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          data={this.state.data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item, index }) => {
            return (
              <Button title = 'hello'
onPress = {() =>alert(item)}
              />
            );
          }}
        />
Rishav Kumar
  • 4,979
  • 1
  • 17
  • 32
0
  <FlatList
    data={data}
    renderItem={({item}) => (
      <Button onPress={() => navigate('Details', {data: item})} />
    )}
  />
Firoz Ahmed
  • 1,929
  • 16
  • 18
0

For navigation purpose, You've to use react-navigation package. Then onPress you can simply call navigation.push method to navigate to a different or same stack(screen).

e.g

navigation.push("SameScreen",{newData:"value"})

Hamza Waleed
  • 1,334
  • 10
  • 12