react native flatlist container style

1import React from 'react';
2import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
3
4const DATA = [
5  {
6    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
7    title: 'First Item',
8  },
9  {
10    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
11    title: 'Second Item',
12  },
13  {
14    id: '58694a0f-3da1-471f-bd96-145571e29d72',
15    title: 'Third Item',
16  },
17];
18
19const Item = ({ title }) => (
20  <View style={styles.item}>
21    <Text style={styles.title}>{title}</Text>
22  </View>
23);
24
25const App = () => {
26  const renderItem = ({ item }) => (
27    <Item title={item.title} />
28  );
29
30  return (
31    <SafeAreaView style={styles.container}>
32      <FlatList
33        data={DATA}
34        renderItem={renderItem}
35        keyExtractor={item => item.id}
36      />
37    </SafeAreaView>
38  );
39}
40
41const styles = StyleSheet.create({
42  container: {
43    flex: 1,
44    marginTop: StatusBar.currentHeight || 0,
45  },
46  item: {
47    backgroundColor: '#f9c2ff',
48    padding: 20,
49    marginVertical: 8,
50    marginHorizontal: 16,
51  },
52  title: {
53    fontSize: 32,
54  },
55});
56
57export default App;

1<FlatList
2    contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
3    //... other props
4/>