Flatlist overwrite previous data

Question

Problem

I've a Flatlist, this Flatlist need to be filled with extra items after that the user click the button " show more ". If i press the button I'm able to update the state of the component, but the flatlist doesn't render the old items. It just overwrites them. I don't understand what i'm missing

Code

Old Data

const [resultsData, setResultsData] = useState([
    { description: '10/10/2019', reportId: 2131231734, reportNumber: 2131231734 },
    { description: '12/10/2019', reportId: 2131231636, reportNumber: 2131231636 },
    { description: '15/10/2019', reportId: 2131231777, reportNumber: 2131231777 },
    { description: '12/11/2019', reportId: 2131231666, reportNumber: 2131231666 },
    { description: '10/10/2019', reportId: 2131231555, reportNumber: 2131231555 },
    { description: '10/10/2019', reportId: 2131231444, reportNumber: 2131231444 },
    { description: '10/10/2019', reportId: 2131231333, reportNumber: 2131231333 },
    { description: '10/10/2019', reportId: 2131231222, reportNumber: 2131231222 },
    { description: '10/10/2019', reportId: 2131231111, reportNumber: 2131231111 },
    { description: '10/10/2019', reportId: 2131231000, reportNumber: 2131231000 },
  ]);

New data that i need to add

const _showMore = () => {
    setRefresh(true);
    setResultsData([
      ...resultsData,
      { description: '10/10/2019', reportId: 32131231734, reportNumber: 2131231734 },
      { description: '12/10/2019', reportId: 32131231636, reportNumber: 2131231636 },
      { description: '15/10/2019', reportId: 32131231777, reportNumber: 2131231777 },
      { description: '12/11/2019', reportId: 32131231666, reportNumber: 2131231666 },
      { description: '10/10/2019', reportId: 42131231555, reportNumber: 2131231555 },
      { description: '10/10/2019', reportId: 52131231444, reportNumber: 2131231444 },
      { description: '10/10/2019', reportId: 62131231333, reportNumber: 2131231333 },
      { description: '10/10/2019', reportId: 27131231222, reportNumber: 2131231222 },
      { description: '10/10/2019', reportId: 82131231111, reportNumber: 2131231111 },
      { description: '10/10/2019', reportId: 92131231000, reportNumber: 2131231000 },
    ]);
    setRefresh(false);
  };

The component

const _renderReportCard = ({ item }) => (
    <GenericListItem
      textLeft={item.reportId}
      icon={downloadIcon}
      onPress={() => fetchResultDetails(item.reportId)}
      textRight={item.description}
    />
  );
  return (
    <StyledContainer>
      <ReportsList
        style={{ flex: 1 }}
        initialNumToRender={resultsData.length}
        extraData={resultsData}
        data={resultsData}
        keyExtractor={_keyExtractor}
        renderItem={_renderReportCard}
        getItemLayout={(data, index) => ({ length: 40, offset: 40 * index, index })}
        onRefresh={_showMore}
        refreshing={refresh}
      />
      <View>
        <ShowMore onPress={_showMore}>
          <ShowMoreText>{t('show').toUpperCase()}</ShowMoreText>
        </ShowMore>
      </View>
    </StyledContainer>
  );

Expected Behaviour

I need, when I press the ShowMore Button, to see all 20 items.

Answer 1

I've recreated your example and it's working fine.

Code:

export default function App() {

  const [resultsData, setResultsData] = React.useState([
    { description: '10/10/2019', reportId: 2131231734, reportNumber: 2131231734 },
    { description: '12/10/2019', reportId: 2131231636, reportNumber: 2131231636 },
    { description: '15/10/2019', reportId: 2131231777, reportNumber: 2131231777 },
    { description: '12/11/2019', reportId: 2131231666, reportNumber: 2131231666 },
    { description: '10/10/2019', reportId: 2131231555, reportNumber: 2131231555 },
    { description: '10/10/2019', reportId: 2131231444, reportNumber: 2131231444 },
    { description: '10/10/2019', reportId: 2131231333, reportNumber: 2131231333 },
    { description: '10/10/2019', reportId: 2131231222, reportNumber: 2131231222 },
    { description: '10/10/2019', reportId: 2131231111, reportNumber: 2131231111 },
    { description: '10/10/2019', reportId: 2131231000, reportNumber: 2131231000 },
  ]);

const _showMore = () => {

    setResultsData([
      ...resultsData,
      { description: '10/10/2019', reportId: 32131231734, reportNumber: 2131231734 },
      { description: '12/10/2019', reportId: 32131231636, reportNumber: 2131231636 },
      { description: '15/10/2019', reportId: 32131231777, reportNumber: 2131231777 },
      { description: '12/11/2019', reportId: 32131231666, reportNumber: 2131231666 },
      { description: '10/10/2019', reportId: 42131231555, reportNumber: 2131231555 },
      { description: '10/10/2019', reportId: 52131231444, reportNumber: 2131231444 },
      { description: '10/10/2019', reportId: 62131231333, reportNumber: 2131231333 },
      { description: '10/10/2019', reportId: 27131231222, reportNumber: 2131231222 },
      { description: '10/10/2019', reportId: 82131231111, reportNumber: 2131231111 },
      { description: '10/10/2019', reportId: 92131231000, reportNumber: 2131231000 },
    ]);


  };
  const renderItem = (item) => {
    console.log('length', resultsData.length);
    return (
        <View key={item.reportId}>
          <Text> {item.reportId} </Text>
        </View>
    );
  }
  return (
    <View style={styles.container}>
      <FlatList 
        data={resultsData}
        renderItem={({item}) => renderItem(item)}
      />
      <Button onPress={() => _showMore()} title="Show more" />
    </View>
  );
}

Demo:

https://snack.expo.io/hVEo7rPnFm