/Javascript/React/React native flatlist container style

React native flatlist container style

React native flatlist

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

React native flatlist container style

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

Similar codes

0 vote378 views1 answer
React avoid spreading non-dom props across component
Javascript React
0 vote313 views1 answer
Webpack react proxy not working
Javascript React
19 votes262 views10 answers
'Switch' is not exported from 'react-router-dom'. ch warning.
Javascript React
0 vote302 views1 answer
Concat two arrays each value react typescript
Javascript React
105 votes332 views1 answer
Create react app scaffolding
Javascript React
16 votes329 views1 answer
Deploy react app netlify
Javascript React
0 vote358 views1 answer
How to console log in react native
Javascript React
0 vote344 views1 answer
Difference between controlled and uncontrolled components in react js
Javascript React
18 votes321 views2 answers
How to store an array in localstorage reactjs
Javascript React
139 votes447 views6 answers
Creat react app
Javascript React