How to remove List View empty space at the top?

Question

I have implemented a List using react-native-elements, but it always have a empty space at the top, if I scroll down it works correctly, and is basically the first item right bellow the blue header bar.

Here is the code:

render() {
        var randomFloat = require('random-float');
        return (
            <View style={{ flex: 1 }}>
                <View style={styles.headerStyle}>
                    <Text style={styles.headerText}>Saldo</Text>
                    <Text style={styles.headerTextBig}>R$ 93,70</Text>
                </View>
                <ScrollView>
                    <View>
                        <List>
                            {
                                list.map((l, i) => (
                                    <ListItem
                                        roundAvatar
                                        key={i}
                                        title={l.name}
                                        subtitle={
                                            <View>
                                                <View style={styles.subtitleView}>
                                                    <Text style={styles.ratingText}>{l.subtitle}</Text>
                                                </View>
                                                <View style={styles.subtitleView}>
                                                    <Text style={styles.ratingText}>{randomFloat(0, 10).toFixed(2)} km</Text>
                                                </View>
                                            </View>
                                        }
                                        avatar={<Avatar
                                            medium
                                            rounded
                                            source={l.avatar_url && { uri: l.avatar_url }}
                                            title={l.name[0]}
                                        />}
                                    />
                                ))
                            }
                        </List>
                    </View>
                </ScrollView>
            </View>
        );
    }

I've tried setting a stylesheet style to it, but I don't know which property to use.

Answer 1

The List component contains a default marginTop: 20, which is causing the spacing issue.

Therefore you can use

...
<List containerStyle={{marginTop: 0}}>
...

to override it.