Algolia和React Native FlatList ListHeaderComponent

Question

I you put an Algolia connected component in a header of a FlatList it's as if it enters an infinite loop of queries. The connectInfiniteHits runs constantly.

This is really annoying if you like to put some simple filters in the headers of a list of hits.

My setup is like this:

I have a FlatList that is wrapped by the connectInfiniteHits HOC. The ListHeaderComponent contains a component this is wrapped by the connectRefinementList HOC. The same problem occurs with a connectSearchBox HOC.

Has anyone seen this and found a solution?

Answer 1

I manage to make it work with those lines:

const RefinementList = connectRefinementList(({ items, refine }) => (
  <View>
    {items.map(item => (
      <TouchableOpacity key={item.label} onPress={() => refine(item.value)}>
        <Text style={{ fontWeight: item.isRefined ? '600' : 'normal' }}>
          {item.label}
        </Text>
      </TouchableOpacity>
    ))}
  </View>
));

const InfiniteHits = connectInfiniteHits(({ hits, hasMore, refine }) => (
  <FlatList
    data={hits}
    keyExtractor={item => item.objectID}
    onEndReached={() => hasMore && refine()}
    ListHeaderComponent={<RefinementList attribute="brand" />}
    renderItem={({ item }) => (
      <View>
        <Text>{JSON.stringify(item).slice(0, 100)}</Text>
      </View>
    )}
  />
));

Note that I'm not using the function version which indeed breaks.