React Native Floating Action Button

This tutorial explains how to add floating action button in react native application. It was first introduced in Android Material Design and Gmail App is the best example where you can see the Floating Action Button.This is round type of Icon button floating above the application UI at the right bottom side of screen. In this tutorial we would going to create a react native app with Floating Action Button using TouchableOpacity and Image component.

React Native Add Floating Action Button :

Lets see the below simple example for floating action button in react native application.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

import React, { Component } from "react";
 import { Platform, StyleSheet, View, Image, TouchableOpacity, Alert, Text } from "react-native";

Step-4: inside the App class create function named as FloatingButtonEvent . This function shows alert message when use click on floating action button.

 FloatingButtonEvent=()=>{
       Alert.alert("Floating Button Clicked");
   }

Step- 5: Create images folder inside the react native project and place the floating action button image in it.

Images folder :

Floating action button image :

Step-6 : Implement render method and return TouchableOpacity component wrapped by root View component. Using TouchableOpacity component, we have added floating action button at bottom right corner of the screen.

render() {
      return (
        <View style={styles.container}>
        <Text style={styles.headerText}> Floating Button Example </Text>
         <TouchableOpacity activeOpacity={0.5} onPress={this.FloatingButtonEvent} style={styles.TouchableOpacityStyle} >
           <Image source={require('./images/button.png')}  style={styles.FloatingButtonStyle} />
         </TouchableOpacity>
       </View>
     );
   }

Step-7: Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold'
  },
  TouchableOpacityStyle: {
    position: 'absolute',
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    right: 30,
    bottom: 30,
  },
  FloatingButtonStyle: {
    resizeMode: 'contain',
    width: 50,
    height: 50,
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to add floating action button in react native application and provides Android Material Design look and feel.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 import React, { Component } from "react";
 import { Platform, StyleSheet, View, Image, TouchableOpacity, Alert, Text } from "react-native";

 export default class App extends Component {

   FloatingButtonEvent=()=>{
       Alert.alert("Floating Button Clicked");
   }

   render() {
      return (
        <View style={styles.container}>
        <Text style={styles.headerText}> Floating Button Example </Text>
         <TouchableOpacity activeOpacity={0.5} onPress={this.FloatingButtonEvent} style={styles.TouchableOpacityStyle} >
           <Image source={require('./images/button.png')}  style={styles.FloatingButtonStyle} />
         </TouchableOpacity>
       </View>
     );
   }
 }


 const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold'
  },
  TouchableOpacityStyle: {
    position: 'absolute',
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    right: 30,
    bottom: 30,
  },
  FloatingButtonStyle: {
    resizeMode: 'contain',
    width: 50,
    height: 50,
  },

});

Screenshot :

Apply below CSS Stylesheet design, if you like to display floating button in square shape.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold'
  },
  TouchableOpacityStyle: {
    position: 'absolute',
    width: 30,
    height: 30,
    alignItems: 'center',
    justifyContent: 'center',
    right: 30,
    bottom: 30,
  },
  FloatingButtonStyle: {
    resizeMode: 'contain',
    width: 50,
    height: 50,
  },

});

Download Link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20Floating%20Action%20Button

This all about React Native Floating Action Button. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.