React Native Add Floating Action Button in Both Android iOS App

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.

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.

3. Create a Root View in render’s return block. This View is our main View.

4. Create the TouchableOpacity component in Root View. We would also call the SampleFunction() on TouchableOpacity onPress event.

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.

6. Create Style for View, TouchableOpacity and Image component.

7. Complete source code for App.js File :

Screenshot in Android Device :

Add Floating Action Button

Screenshot in iOS device :

6 Comments

  1. Thanks a lot!

  2. Really very helpful

Leave a Reply

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