/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 vote193 views1 answer
Find in array and return true or false react js
Javascript React
0 vote153 views1 answer
React 5 to 10 rating
Javascript React
0 vote104 views0 answer
React
Javascript React
0 vote164 views1 answer
React native no android sdk found
Javascript React
0 vote162 views1 answer
Remove unused dependencies React
Javascript React
0 vote168 views1 answer
React native get route name
Javascript React
2 votes153 views1 answer
How to dynamically show image from local storage in react native
Javascript React
0 vote140 views1 answer
HandleClickoutside custom hook react
Javascript React
17 votes157 views6 answers
React native build android
Javascript React
10 votes159 views4 answers
Attempted import error 'switch' is not exported from 'react-router-dom'. in react js
Javascript React