React Native Part 5: FlatList

FlatList is a self contained React Native component which can be used to display a scrollable list of items.

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

export default function App() {
  const [contacts,setContact] = useState([
    {name: 'Shalvin', key:1},
    {name: 'Joy', key:2},
    {name: 'Arun', key:3},
    {name: 'Lloyd', key:4},
    {name: 'Ronex', key:5},
    {name: 'Abdella', key:6},
    {name: 'Basem', key:7},
  ]);

  return (
    <View style={styles.container}>
      <FlatList 
        data = {contacts}
        renderItem={ ({item}) => (
          <Text style={styles.listItem}>{item.name}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  listItem: {
    padding: 30,
    marginVertical: 10,
    backgroundColor: '#ccc',
    borderColor: 'black',
    borderWidth: 1
  }
});