/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 vote134 views1 answer
Export variables react
Javascript React
0 vote129 views1 answer
React native 'UMConstantsInterface/UMConstantsInterface.h' file not found
Javascript React
0 vote126 views1 answer
React onpaste get value
Javascript React
0 vote175 views1 answer
Button click open external link react
Javascript React
32 votes315 views2 answers
How to routing in react js
Javascript React
32 votes151 views1 answer
How to use routes in react js
Javascript React
0 vote125 views1 answer
Cannot find module react scripts
Javascript React
0 vote121 views6 answers
Replace all in react js
Javascript React
5 votes201 views2 answers
Add object in array state react
Javascript React
0 vote130 views2 answers
How to add fcc cdn to local react projcet
Javascript React