React-native – React Native FlatList not scrolling to end

react-native, react-native-elements, react-native-flatlist

I've got (what I thought was) a simple FlatList which renders a list of Cards (code below)

Problem: the list renders, but won't scroll to fully display the last element in the list, OR to the content below the FlatList

What I've tried: basically everything in related SO questions:

  • Removing ALL styling
  • Wrapping the FlatList in a View or a ScrollView or both
  • Adding style={{flex: 1}} to the FlatList or wrappers (this causes **ALL* content to disappear)

Any ideas?

<FlatList        data={props.filteredProducts}        renderItem={({item}) => (          <TouchableOpacity onPress={() => props.addItemToCart(item)}>            <Card              featuredTitle={item.key}              image={require('../assets/icon.png')}            />          </TouchableOpacity>        )}        keyExtractor={item => item.key}        ListHeaderComponent={          <SearchBar />        }      />...<Other Stuff>

Best Solution

Add style={{flex: 1}} for each View element who is a parent for FlatList.