Respond to relevance

Question

I select a list of products and then display them using a flat list, my list contains 5 elements, and as you can see, the height of the line in the flat list is variable due to differences in the description text. So the problem is that my last map of the item is not fully visible, maybe it's some kind of flat list problem or layout problem. Any help would be greatly 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

Add {flex: 1} to the View tag that hosts 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;

Answer 2

Set bottom margin

 <FlatList

 contentContainerStyle={{ paddingBottom: 20}}

 />

Answer 3

@Christian ( , ) flex: 1, flex: 1 . flex: 1, . , , flex: 1 SafeAreaView . , SafeAreaView backgroundColor .

, , / FlatList ( ).

: ListFooterComponent, " " /

( , ... iPhone , 2019 , )

ListFooterComponent={<View style={{ height: 0, marginBottom: 90 }}></View>}

, iPhoneX. , , iPhone :

ListFooterComponent={<View style={{ height: 0, marginBottom: noBezels ? 90 : 0 }}></View>}

, , GIF, ... .

response-native-device-info, hasNotch(). , iPhone , hasNotch() Platform.OS === 'ios'

() *

, , ...

SafeAreaView .

import { SafeAreaView } from 'react-navigation';
<SafeAreaView forceInset={{ bottom: 'never' }} />

Answer 4

use contentContainerStyle details FlatList

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

Answer 5

For iOS issues, you can apply some specific iOS details:

<FlatList
  // ...
  contentInset={{top: 0, bottom: 20, left: 0, right: 0}}
  contentInsetAdjustmentBehavior="automatic"
  // ...  
/>

The contentContainerStyle solution does not seem to be the best solution for solving iOS problems in a safe area.