React Native Simple FlatList Component Android iOS Example Tutorial

How to use FlatList in react native android iOS application with FlatList Item Separator line, custom Flat List items and get item clicked value.

The FlatList component is used to show common type of structured data into a scrolling view. Each item present in single row one by one. The major benefit of using FlatList that it renders only items, who shows on the screen and dose not render the items who dose not displaying on the screen. When user scrolls down the FlatList then it automatically render the next elements.

What we are doing in this project :- We are displaying a custom FlatList component with multiple type of similar data. User can get the FlatList item by clicking on it and the selected item would print on the screen using Alert message. This single code works for both Android and iOS devices.

Contents in this project Simple FlatList Component :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry , StyleSheet , FlatList , Text , View and Alert  component in import block.

3. Create constructor in your main class. For example my project main class with props parameter. Inside the constructor create super(props)  method. Now using this.state  we are defining the FlatList items array with key . Key should be added with items.

4. Create a function named as FlatListItemSeparator  . Using this method we are generating the FlatList each item separator – divider line. This method generates a rendering view.

5. Add View as parent view in render’s return block.

6. Create custom css class named as MainContainer just above the AppRegistry.registerComponent line.

7. Call the MainContainer class in View.

8. Add FlatList component inside the parent View.

9. Set FlatListItems created inside the this.state  into the FlatList using data={ this.state.FlatListItems }  .

10. Call the function  FlatListItemSeparator  in FlatList using ItemSeparatorComponent  prop.

11. Create a CSS style class named as item. Using this class you can modify each element of Flat List.

12. Now we have to render each element in the FlatList using Text component renderItem={({item}) => <Text style={styles.item}} > {item.key} </Text>} .

13. Final step is to add onPress=" "  on Text component inside Flat List to retrieve the clicked item value.

14. Create a function named as GetItem(item) to get and show selected item using Alert.

15. Final step is to call the GetItem(item)  function on onPress  of Text component using bind method and pass item.key with it.

16. Complete source code of index.android.js / index.ios.js file :

Screenshots in iOS device :

Screenshots in Android device :

FlatList

One Comment

  1. How to make the FlatList to automatic Scroll?

Leave a Reply

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