Create FlatList in React-Native Expo

Wanted:

I want display list like image below:

flatlist_web2
Question:

How to do that … ?

Answer:

Create File

Create a filename listDoa.js inside views folder and add this code:

import React,{ Component } from ‘react’;
import { FlatList, Text, StyleSheet, View } from ‘react-native’;

export default class ListDoa extends Component {
render() {

return (

   <View style={styles.container}>

<FlatList

data={[ {key: ‘Menuju Masjid’},{key: ‘Masuk Masjid’},{key: ‘I\’tikaf di Masjid’},{key: ‘Keluar Masjid’}]}
renderItem={({item}) => <Text style={styles.tengah}>{item.key}</Text>}
/>

 </View>
)

     }

}

const styles = StyleSheet.create({

container: {

flex: 1,
paddingTop: 30,

},
tengah:{

height:44,
textAlign:’center’,
marginBottom:1,
paddingTop:10,
fontSize:16,
backgroundColor:’#CCC’

}

});

Explain:

  • class ListDoa extends Component, this code is for making a class Component called ListDoa
  • export default is used to export this ListDoa Component so later can be imported
  • style attribute is used to give CSS style to element
  • renderItem is a function to takes an item from data and renders it into the list.

 

Modify App.js

Open App.js and modify the content like this:

import React from ‘react’;
import ListDoa from ‘./views/listDoa’;

const App = () => {
return (

<ListDoa />

)
}

export default App;

Explain:

  • import ListDoa from ‘./views/listDoa’, this code is used to import ListDoa Component from listDoa File inside views folder
  • <ListDoa /> is to called ListDoa Component

Result:

Run the app with command expo start

 

Thanks for Reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *