React Native Show Floating Action Button Above ListView FlatList

The floating action button can be displayed on the top of the ListView component. You can do any certain task on floating button click event. So in this tutorial we would going to create a react native app in which we would going to Show Floating Action Button Above ListView, FlatList and ScrollView in both android and iOS applications.

Note: Using this tutorial you can implement Floating Action Button above ListView, FlatList and also ScrollView component in react native.

Contents in this project Show Floating Action Button Above ListView & FlatList :

1. Import StyleSheet, ActivityIndicator, ListView, Text, View, Alert, TouchableOpacity and Image component in your project.

2. Create constructor() in your project. Now we would create constant named as ds and set ListView data source to it. Create dataSource array using State in constructor() this would be our ListView items. If you want to implement Floating Action button on JSON ListView then read my this tutorial and to JSON FlatList read my this tutorial.

3. Create a function named as ListViewItemSeparator(). This function would render and display the Separator line between each Items of ListView.

4. Create function named as GetListViewItem() with rowData parameter. This function would display the ListView item click value.

5. Create a function named as SampleFunction(). We would call this function on Floating Action Button onPress event.

6. Create a Root View in render’s return block. This would be our Main View.

7. Create ListView component in View.

dataSource : Setting up the ListView items created inside State in dataSource.

renderSeparator : Call the ListViewItemSeparator function to display separator line between items.

renderRow : populating items form dataSource and Rendering rows in ListView.

8. Create TouchableOpacity component in View after ListView. TouchableOpacity is used to make the Image clickable in react native. So we would wrap the Floating Action Button image icon using TouchableOpacity. Now we would call the SampleFunction() on TouchableOpacity onPress event.

9. Create Style for ListViewTouchableOpacity, Image and View component.

10. Complete source code for App.js File :

Screenshots in Android device :

Show Floating Action Button Above ListView FlatList

Screenshots in iOS device :

Leave a Reply

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