React-native flatlist componente implementation (infinte scroll)

flatListComponent.js

function FlatListComponent({ page, updated, fetchedData, updateState, refreshQuery, navigation, categorieID, subcategories = null}) {
  const { loading, error, data } = subcategories ?  useQuery(articlesBySubcategories(categorieID, ARTICLES_TO_FETCH * (page - 1)))
                                                  : useQuery(articlesByCategories(categorieID, ARTICLES_TO_FETCH * (page - 1)));
  if (error) return <Text> { `Error! ${error}` } </Text>
  if (!updated && !data) return <ActivityIndicatorComponent />
  const newData = subcategories ? data['subcategorias'][0].articulo 
                                : data['categorias'][0].articulo;
  const hasMore = !(newData.length < ARTICLES_TO_FETCH);
  if (!updated && !loading && data) updateState(newData);
  return (
        <FlatList
        style={{ width: '100%' }}
        data={fetchedData}
        keyExtractor={ ( item, index ) => index }
        onEndReachedThreshold={0.5}
        onEndReached={() => hasMore && refreshQuery()}
        ListHeaderComponent={() => 
          <View style={ styles.container }>
            <Image size={ relativeWidth( 20 ) } style={ styles.image } source={ navigation.state.params.icon } />
            <Text style={ styles.header }>
              { navigation.state.params.title || ''}
            </Text>
            <Text style={ styles.description }>
              { navigation.state.params.description || '' }
            </Text>
          </View>
        }
        renderItem={ ({ item, index }) => 
          <CardView
            data={item}
            index={index}
            goToArticles={null}
            goToChapters={null}
          />
        }
        ListFooterComponent={() => {
          if (!loading && !hasMore) return null;
          return (<ActivityIndicatorComponent/>);
        }}
      />
  )
}