Why doesn't my flatlist render my components again when filtering?

Question

I have a flatlist with a search component at the top:

<>
  <SearchBar
    placeholder="Pesquise por nome, idade ou saldo"
    lightTheme
    round
    autoCapitalize="none"
    onChangeText={text => searchFilterFunction(text)}
    autoCorrect={false}
    value={term}
    containerStyle={{ backgroundColor: 'transparent' }}
    style={{ borderWidth: 0 }}
  />
  <FlatList
    data={lotsResult}
    keyExtractor={lot => lot.id.toString()}
    renderItem={({ item: lot }) => {
      const collectDate = new Date(lot.collectDateInMili);
      const age = differenceInDays(new Date(), collectDate) + 1;
      return (
        <Appointment
          id={lot.id}
          originUserId={lot.originUserId}
          aviaries={lot.aviaries}
          name={lot.name}
          balance={lot.balance}
          late={lot.late}
          age={age}
          collectDateInMili={lot.collectDateInMili}
          batchDateInMili={lot.collectDateInMili}
        />
      );
    }}
  />
</>

When the user types in the search box this flatlist calls the function searchFilterFunction:

function searchFilterFunction(text: string) {
  setTerm(text);
  const textData = text.toLowerCase();
  const newData = lots.data.filter(item => {
    const collectDate = new Date(item.collectDateInMili);
    const age = differenceInDays(new Date(), collectDate) + 1;
    const itemData = `${item.name.toLowerCase()} ${item.balance
      .toString()
      .toLowerCase()} ${age.toString().toLowerCase()}`;
    return itemData.indexOf(textData) > -1;
  });
  console.log('searchFilterFunction -> textData', textData);
  console.log('searchFilterFunction -> newData', newData);
  SetLotsResult(newData);
}

The lots state used to search the data for this function is the original and immutable state of my component. I pass the results to lotsResult and render it in the flatlist. However when searching for a term: 28798 I make a console.log and my function returns the array of values, but it is not rendered in the flatlist.

Console.log of return:

{
  "message": "searchFilterFunction -> newData",
  "args": [
    [
      {
        "id": 3,
        "originUserId": 1,
        "name": "28798-GENIVAL ALVES 01 (G-1,2)",
        "balance": 2375,
        "aviaries": [
          {
            "id": 2,
            "batchId": 1,
            "name": "AV02",
            "capacity": 45000
          },
          {
            "id": 3,
            "batchId": 1,
            "name": "AV03",
            "capacity": 1500
          }
        ],
        "late": true,
        "batchDateInMili": 1596596400000,
        "collectDateInMili": 1596596400000
      },
      {
        "id": 2,
        "originUserId": 1,
        "name": "28798-GENIVAL TERTO ALVES 01 (G-1,2)",
        "balance": 65000,
        "aviaries": [
          {
            "id": 1,
            "batchId": 1,
            "name": "AV01",
            "capacity": 65000
          }
        ],
        "late": true,
        "batchDateInMili": 1596769200000,
        "collectDateInMili": 1596769200000
      }
    ]
  ]
}

Answer 1

I verified that when the data that feeds the Flatlist changes, my component is not characterized by not having a fixed height. I solved the problem by defining a min-height.