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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, ActivityIndicator, ListView, Text, View, Alert, TouchableOpacity, Image } from ‘react-native’;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
‘One’,
‘Two’,
‘Three’,
‘Four’,
‘Five’,
‘Six’,
‘Seven’,
‘Eight’,
‘Nine’,
‘Ten’,
‘Eleven’,
‘Twelve’,
‘Thirteen’,
‘fourteen’,
‘Fifteen’
]),
};
}
|
3. Create a function named as ListViewItemSeparator(). This function would render and display the Separator line between each Items of ListView.
|
1
2
3
4
5
6
7
8
9
10
11
|
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
|
4. Create function named as GetListViewItem() with rowData parameter. This function would display the ListView item click value.
|
1
2
3
4
5
|
GetListViewItem (rowData) {
Alert.alert(rowData);
}
|
5. Create a function named as SampleFunction(). We would call this function on Floating Action Button onPress event.
|
1
2
3
4
5
6
|
SampleFunction=()=>{
// Write your own code here, Which you want to execute on Floating Button Click Event.
Alert.alert(“Floating Button Clicked”);
}
|
6. Create a Root View in render’s return block. This would be our Main View.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
render() {
return (
<View style={styles.MainContainer}>
</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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
render() {
return (
<View style={styles.MainContainer}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={
(rowData) => <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}>{rowData}</Text>
}
/>
</View>
);
}
|
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.
|
1
2
3
4
5
6
7
|
<TouchableOpacity activeOpacity={0.5} onPress={this.SampleFunction} style={styles.TouchableOpacityStyle} >
<Image source={{uri : ‘/wp-content/uploads/2017/11/Floating_Button.png’}}
style={styles.FloatingButtonStyle} />
</TouchableOpacity>
|
9. Create Style for ListView, TouchableOpacity, Image and View component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
rowViewContainer:
{
fontSize: 18,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
TouchableOpacityStyle:{
position: ‘absolute’,
width: 50,
height: 50,
alignItems: ‘center’,
justifyContent: ‘center’,
right: 30,
bottom: 30,
},
FloatingButtonStyle: {
resizeMode: ‘contain’,
width: 50,
height: 50,
}
});
|
10. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Alert, ListView, Text, TouchableOpacity, Image } from ‘react-native’;
export default class Mynewproject extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
‘One’,
‘Two’,
‘Three’,
‘Four’,
‘Five’,
‘Six’,
‘Seven’,
‘Eight’,
‘Nine’,
‘Ten’,
‘Eleven’,
‘Twelve’,
‘Thirteen’,
‘fourteen’,
‘Fifteen’
]),
};
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
GetListViewItem (rowData) {
Alert.alert(rowData);
}
SampleFunction=()=>{
// Write your own code here, Which you want to execute on Floating Button Click Event.
Alert.alert(“Floating Button Clicked”);
}
render() {
return (
<View style={styles.MainContainer}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={
(rowData) => <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}>{rowData}</Text>
}
/>
<TouchableOpacity activeOpacity={0.5} onPress={this.SampleFunction} style={styles.TouchableOpacityStyle} >
<Image source={{uri : ‘/wp-content/uploads/2017/11/Floating_Button.png’}}
style={styles.FloatingButtonStyle} />
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
rowViewContainer:
{
fontSize: 18,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
TouchableOpacityStyle:{
position: ‘absolute’,
width: 50,
height: 50,
alignItems: ‘center’,
justifyContent: ‘center’,
right: 30,
bottom: 30,
},
FloatingButtonStyle: {
resizeMode: ‘contain’,
width: 50,
height: 50,
}
});
|
Screenshots in Android device :
Screenshots in iOS device :
Also Read :
Use React Native Ionicons Icon in Android iOS App Example
React Native Add Background Animation on ScrollView Scroll Event
How to Call Another Class Function From Default Class in React Native
React Native Get Device Height Width on Button Click
Upgrade NPM Node.js on MAC OS Latest Version Using Terminal
