React Native Simple ListView Component iOS Android Example Tutorial

How to use ListView in react native android and iOS application and set onPress on ListView to get clicked item programmatically.

ListView is one of the most oldest and habitual component in Android application development and iOS application development. It is the easiest way to represent single type of multiple data into a single screen with scrolling feature. The scrolling is by default enabled into ListView.

What we are doing in this project :

We are creating a simple ListView with multiple items like one, two, three, four etc. You can set items name according to your requirement. Now we would set onPress method on ListView which would return us the clicked item and we would show the click item using Alert message. This single code works for both Android and iOS devices.¬†So let’s get started ūüôā .

Contents in this project Simple ListView Component :

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

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

3. Create constructor in your main class with props parameter. Create super method in constructor. Now create constant ds variable and assign ListView.DataSource rowHasChanged to it, After it set data source ListView item values using this.state .

4. Create a function named as ListViewItemSeparator¬†. Using this method we are generating the ListView each item separator ‚Äď divider line.

5. Create GetListViewItem  method to show the selected ListView  item name.

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

7. Create custom css class named as MainContainer and rowViewContainer just above the AppRegistry.registerComponent line.

8. Call the MainContainer class in View.

9. Add ListView  component inside the View.

dataSource : Calling the data source we have defined earlier using state. This is the ListView item values.

renderSeparator : Calling the ListViewItemSeparator method to display a plane simple line between items.

renderRow : setting up row data using Text component.

onPress : Calling GetListViewItem function on button click.

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

Screenshots:

ListView

Leave a Reply

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