Newby Coder header banner

React Native Floating Action Button

A floating action button appears in front of screen content, typically as a circular shape with an icon in its center

react-native-action-button provides an ActionButton component which can be used togroup multiple buttons which are showed when outer button is clicked (similar to dropdown)

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named NcActionBtnApp)

react-native init NcActionBtnApp

This creates a directory named NcActionBtnApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into


Go to project directory (here NcActionBtnApp)

cd NcActionBtnApp

Add react-native-action-button package to current project using yarn

yarn add react-native-action-button

or using npm

npm install react-native-action-button --save


After yarn add command, cd into ios folder inside project directory

cd ios

Use pod command to install any required CocoaPods dependencies:

pod install


Properties of ActionButton component

sizenumber56use this to change the size of the Button
resetTokenanynulluse this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state.
activebooleanfalseaction buttons visible or not
autoInactivebooleantrueAuto hide ActionButtons when ActionButton.Item is pressed.
positionstring"right" / "center"one of: left center and right
spacingnumber20spacing between the ActionButton.Items
offsetXnumber30offset from the left/right side of the screen
offsetYnumber30offset from the bottom/top of the screen
buttonTextstring+use this to set a different text on the button
backgroundTappablebooleanfalsemake background tappable in active state of ActionButton
activeOpacitynumber0.85activeOpacity props of TouchableOpacity
sizenumberparentSizeuse this to change the size of the Button
titlestringundefinedthe title shown next to the button. When undefined the title is not hidden
onPressfuncnullrequired function, triggers when a button is tapped
buttonColorstringsame as + buttonbackground color of the Button
textContainerStylestylenulluse this to set the textstyle of the button's item text container

App Code

import React, { Component } from 'react';
import { StyleSheet, View, Alert, Text, Image } from 'react-native';
import ActionButton from 'react-native-action-button';

class App extends Component {

  render() {
    return (
      <View style={{flex:1, backgroundColor: '#f3f3f3'}}>

        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item buttonColor='#9b59b6' title="Add" onPress={() => Alert.alert("Add tapped")}>
            <Image source={{ uri: '', }} style={styles.itemButton} />
          <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => Alert.alert("Notifications tapped")}>
            <Image source={{ uri: '', }} style={styles.itemButton} />
          <ActionButton.Item buttonColor='#fff' title="Tasks" onPress={() => {}}>
            <Image source={{ uri: '', }} style={styles.itemButton} />

const styles = StyleSheet.create({
  itemButton: {
    left:0, right:0,

export default App;

Run instructions

Running in Android

cd into project directory (here NcActionBtnApp)

cd NcActionBtnApp

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android:

react-native run-android

Running in ios

cd into project directory (here NcActionBtnApp)

cd NcActionBtnApp

Enter following command :

react-native run-ios

This might take some time

If the app shows error about metro server not configured (check Running an App in iOS), then run metro server in another tab:

react-native start

Reload the app

Re-run react-native run-ios command if reloading doesn't work