React Native FlatList last item visibility issue

Question

I am fetching products list and then displaying using a FlatList, my list contains 5 items and as you can see FlatList row height is variable because of varying description text. So the issue is my last item card is not completely visible maybe this is some kind of flat list issue or layout issue. Any help would be highly appreciated

 renderProducts() {         if (this.props.loading === true) {             return (                 <View style={Styles.spinnerStyle}>                     <ActivityIndicator size='large' />                 </View>             );         }          return (                 <FlatList                     data={this.props.myProducts}                     keyExtractor={(item) => item.id}                     renderItem={({ item }) => (                         <Card                              title={item.title}                              image={{                                  uri: item.image !== null ? item.image.src :'../resImage.jpg'                              }}                         >                             <Text style={{ marginBottom: 10 }}>                                 {item.body_html}                             </Text>                             <Button                                 icon={{ name: 'code' }}                                 backgroundColor='#03A9F4'                                 fontFamily='Lato'                                 buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }}                                 title='VIEW NOW'                              />                       </Card>                       )}                 />         );     }          render() {         return (             <View>                 <View style={Styles.viewStyle}>                     <Text style    {Styles.textStyle}>ProductsList</Text>                 </View>                     {                          this.renderProducts()                      }             </View>         );     } 

Answer 1

Set bottom padding to the <FlatList> content container:

<FlatList     contentContainerStyle={{ paddingBottom: 20 }} /> 

Answer 2

Add {flex: 1} to the View tag housing the Flatlist component.

In my case,

const App = () => {   return (     <Provider store={createStore(reducers)}>     <View style={{ flex: 1 }}>       <Header headerText={'My App'} />       <ScreenTabs /> // this is my content with FlatList      </View>     </Provider>   ); };  export default App;