React Native FlatList not scrolling to end

Question

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>

Answer 1

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