Floating Action Button is used for a special type of sudden actions in android applications. But using react native mobile app development language we can Add Floating Action Button in Both Android iOS Applications. This is round type of Icon button floating above the application UI at the right bottom side of screen. So in this tutorial we would going to create a react native app with Floating Action Button using TouchableOpacity and Image component. The TouchableOpacity is used to makes the Floating Action Button clickable. So let’s get started .
Note : The Floating Action Button is designed by myself in Photoshop. You can download this icon from below and use it anywhere. I am calling the ICON directly from my website in this tutorial using URI .
Contents in this project Add Floating Action Button in Both Android iOS App in React Native :
1. Import StyleSheet, View, Image, TouchableOpacity and Alert component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Image, TouchableOpacity, Alert } from ‘react-native’;
|
2. Create a function named as SampleFunction(). We would call this function on Floating Action Button onPress event. We would only show a alert message in this function, you can perform any certain action according to your requirement.
|
1
2
3
4
5
|
SampleFunction=()=>{
Alert.alert(“Floating Button Clicked”);
}
|
3. Create a Root View in render’s return block. This View is our main View.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
4. Create the TouchableOpacity component in Root View. We would also call the SampleFunction() on TouchableOpacity onPress event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity activeOpacity={0.5} onPress={this.SampleFunction} style={styles.TouchableOpacityStyle} >
</TouchableOpacity>
</View>
);
}
|
5. Create the Image component inside TouchableOpacity. We are doing this to make the Icon clickable because by default we cannot set onPress on Image. So we would use the TouchableOpacity to Wrap the Image and make the Image clickable. We would calling the Image Icon from online URL. If you want to call the Image from local resource then read my this tutorial.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
render() {
return (
<View style={styles.MainContainer}>
<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>
);
}
|
6. Create Style for View, TouchableOpacity and Image 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
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor : ‘#F5F5F5’
},
TouchableOpacityStyle:{
position: ‘absolute’,
width: 50,
height: 50,
alignItems: ‘center’,
justifyContent: ‘center’,
right: 30,
bottom: 30,
},
FloatingButtonStyle: {
resizeMode: ‘contain’,
width: 50,
height: 50,
}
});
|
7. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Image, TouchableOpacity, Alert } from ‘react-native’;
export default class App extends Component<{}> {
SampleFunction=()=>{
Alert.alert(“Floating Button Clicked”);
}
render() {
return (
<View style={styles.MainContainer}>
<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: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor : ‘#F5F5F5’
},
TouchableOpacityStyle:{
position: ‘absolute’,
width: 50,
height: 50,
alignItems: ‘center’,
justifyContent: ‘center’,
right: 30,
bottom: 30,
},
FloatingButtonStyle: {
resizeMode: ‘contain’,
width: 50,
height: 50,
}
});
|
Screenshot in Android Device :
Screenshot in iOS device :
Also Read :
Remove Text Input Bottom Underline in React Native Android iOS
React Native Combine Two Strings Into One Using concat() Function
React Native Get Clicked Position of Touch Screen Coordinates using PanResponder iOS Android Tutorial
React Native Communications – Android iOS Example
React Native Change Activity Action Bar Title Text Color StackNavigator
