Question 34327 in React native Question posted in
The official React Native documentation can be found here.

react native flatlist doesn't show updated value

I’m having a trouble in a flatlist that a button increments the value but doesn’t show if I don’t refresh or hit ctrl-s after incrementing value. Basically I cannot see the value change without pressing ctrl-s or going to another page and returning to the same page.

<FlatList 
    data={store}
    renderItem={({ item }) => {
      return (
          <View style={styles.itemCountView}>
            <TouchableOpacity style={styles.up}
              onPress={() => item.itemCount++}>
              <MaterialIcons name="arrow-drop-up" size={36} color="#ddd"/>
            </TouchableOpacity>
            <Text style={styles.itemCountText}>{item.itemCount}</Text>
          </View>
      )
    }}
  />

I can increment the value, if I save or go to another page and come back the value changes and i can see it but there must be a way to see it change.

Any help is appreciated

Tags:

3

Answers


  1. 0

    As per the Documentation

    extraData: https://reactnative.dev/docs/flatlist#extradata

    A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.

    Login or Signup to reply.
  2. 0

    You can try this approach here:

    import {useState} from 'react';
import { Text, View, FlatList, TouchableOpacity } from 'react-native';


const store = [{
  itemCount: 1
},
{
  itemCount: 2

},
{
  itemCount: 3

}]

export default function App() {
  return (
    <View style={{
      flex: 1,
      padding: 140,
    }}>

    <FlatList 
      data={store}
      renderItem={({ item }) => ( <Item item={item}/> )}
    />    
    </View>

  );
}

 const Item = ({item})=> {
 const[count, setCount] = useState(item.itemCount);

     return (
         <View>
            <TouchableOpacity 
              style={{
                backgroundColor: 'black',
                padding: 10,
                margin: 10
              }}
              onPress={() => setCount(count+1)}>
            <Text style={{
              color: 'white'
            }}>{count}</Text>
            </TouchableOpacity>
          </View>
)
}

    This will set the state for each item in the Flatlist.

    Login or Signup to reply.
  3. 0

    I think you’r not saving the changes you doing, basically you need to update the the store variable each time you increment an item, something like:

    <FlatList 
    data={store}
    renderItem={({ item }) => {
      return (
          <View style={styles.itemCountView}>
            <TouchableOpacity style={styles.up}
              onPress={() =>  {
                     const newStoreData = [...store]
                     const itemIndex = newStoreData.findIndex(item)
                     const newItem = {...item,itemCount:item.itemCount ++}
                     newStoreData[itemIndex] = newItem
                     setStoreData(newStoreData) // state or redux?
} 

}>
              <MaterialIcons name="arrow-drop-up" size={36} color="#ddd"/>
            </TouchableOpacity>
            <Text style={styles.itemCountText}>{item.itemCount}</Text>
          </View>
      )
    }}
  />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search