/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

-3 votes224 views1 answer
React native share
Javascript React
0 vote221 views1 answer
Javascript slider get value react
Javascript React
0 vote275 views3 answers
Create react app theme_color
Javascript React
0 vote244 views1 answer
Can i open native video playback for both (Androidt / IOS) With React Native?
Javascript React
1 vote282 views1 answer
React native get mac address
Javascript React
0 vote232 views1 answer
How to take out text from array of strings in react
Javascript React
12 votes220 views1 answer
Suspense react
Javascript React
139 votes304 views2 answers
React js installation steps
Javascript React
6 votes229 views1 answer
'useHistory' is not exported from 'react-router-dom'.
Javascript React
1 vote229 views3 answers
Iframe in react
Javascript React