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

Dependency

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

iOS

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

cd ios

Use pod command to install any required CocoaPods dependencies:

pod install

Usage

Properties of ActionButton component

Property	Type	Default	Description
size	number	56	use this to change the size of the Button
resetToken	any	null	use this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state.
active	boolean	false	action buttons visible or not
autoInactive	boolean	true	Auto hide ActionButtons when ActionButton.Item is pressed.
position	string	"right" / "center"	one of: `left` `center` and `right`
spacing	number	20	spacing between the `ActionButton.Item`s
offsetX	number	30	offset from the left/right side of the screen
offsetY	number	30	offset from the bottom/top of the screen
buttonText	string	+	use this to set a different text on the button
backgroundTappable	boolean	false	make background tappable in active state of ActionButton
activeOpacity	number	0.85	activeOpacity props of TouchableOpacity

ActionButton.Item:

Property	Type	Default	Description
size	number	parentSize	use this to change the size of the Button
title	string	undefined	the title shown next to the button. When `undefined` the title is not hidden
onPress	func	null	required function, triggers when a button is tapped
buttonColor	string	same as + button	background color of the Button
textContainerStyle	style	null	use this to set the textstyle of the button's item text container

App Code

App.js

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: 'https://img.icons8.com/material-outlined/2x/add.png', }} style={styles.itemButton} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => Alert.alert("Notifications tapped")}>
            <Image source={{ uri: 'https://img.icons8.com/material-outlined/2x/appointment-reminders.png', }} style={styles.itemButton} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#fff' title="Tasks" onPress={() => {}}>
            <Image source={{ uri: 'https://img.icons8.com/material-outlined/2x/details-popup.png', }} style={styles.itemButton} />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  itemButton: {
    left:0, right:0,
    top:0,
    bottom:0,
    position:'absolute',
    alignSelf:'stretch',
  },
});

export default App;