react-native-floating-action

Floating action button for React Native

Expo example

Open the following click on your phone: Expo link

or user your phone and scan the following QR:

Use it on Expo

Example of how Expo looks

Installation

npm i react-native-floating-action --save

or

yarn add react-native-floating-action

Example

Take a look into example/ReactNativeFloatingAction-Expo

To execute the example using Expo run the following command:

yarn run run:example

or open Expo link from your mobile

How to use it

First step: import the component:

import { FloatingAction } from 'react-native-floating-action';

Second step: define the buttons

  const actions = [{
    text: 'Accessibility',
    icon: require('./images/ic_accessibility_white.png'),
    name: 'bt_accessibility',
    position: 2
  }, {
    text: 'Language',
    icon: require('./images/ic_language_white.png'),
    name: 'bt_language',
    position: 1
  }, {
    text: 'Location',
    icon: require('./images/ic_room_white.png'),
    name: 'bt_room',
    position: 3
  }, {
    text: 'Video',
    icon: require('./images/ic_videocam_white.png'),
    name: 'bt_videocam',
    position: 4
  }];

Third step: use it

    <View style={styles.container}>
      <Text style={styles.example}>
        Floating Action example
      </Text>
      <FloatingAction
        actions={actions}
        onPressItem={
          (name) => {
            console.log(`selected button: ${name}`);
          }
        }
      />
    </View>

Open and hide it programatically

There are some cases where you want to show or hide the component without pressing the main button:

<FloatingAction
  ref={(ref) => { this.floatingAction = ref; }}
  actions={[...]}
  ...
/>

and then:

this.floatingAction.animateButton();

Configuration

FloatingAction

PropertyTypeDefaultDescription
actionsarray[]Actions to be show once user press the main button
colorstring#1253bcColor of the main button
distanceToEdgenumber30Distance from button to edge
visiblebooleantrueHide or Show the component using an animation
overlayColorstringrgba(68, 68, 68, 0.6)Color of the background overlay
positionstringrightPosition to render the main button and actions, options: (leftrightcenter)
overrideWithActionstringfalseOverride the main action with the first action inside list actions, will not show other action
floatingIconnodeReactElement
showBackgroundbooleantrueShow or Hide background after open it
openOnMountbooleanfalseOpen component after mounting it, useful on some weird cases like tutorials
actionsPaddingTopBottomnumber8Change distance between actions
iconWidthnumber15Icon width of the main button
iconHeightnumber15Icon height of the main button
listenKeyboardbooleanfalseChange position when the keyboard will appear
dismissKeyboardOnPressbooleanfalseDismiss keyboard when user press on the main button
onPressItemfunctionFunction to be call as soon as the user select an option from actions. Will return the name of the action.
onPressMainfunctionFunction to be call as soon as use click main button and will return true or false depeneding of the state.
onPressBackdropfunctionFunction to be call as soon as the backdrop is clicked.
onClosefunctionFunction to be call after set state to false
onOpenfunctionFunction to be call after set state to true
onStateChangefunctionFunction to be call after every state change. Will return state object

Actions

PropertyTypeDefaultDescription
colorstring#1253bcColor of the action button
iconanyIcon to be rendered inside the action, will accept an URL or React.Image. If we want to send an URL we need to send it in this way: icon: { uri: ‘https://imageurl.com‘ } if we want to send a React.Image we will use it in this way: icon: require(‘path/image’)
namestringName of the icon, this name is used as parameter for onPressItem action
textstringText to show near to the button. (Only apply for position = [‘left’, ‘right’])
textBackgroundstring#ffffffBackground color for Text container
textColorstring#444444Text color for every action
textElevationnumber5Elevation property (also modifies “shadowOffset” in iOS)
renderfunctionCustom render function for Action. If provided, other properties are not applicable. The provided function should return a React Node
marginnumber8Additional margin for action. This property is useful when we want to override the current margin for example using custom render
sizenumber40size of of the icon rendered inside the action

TODO

  •  first implementation
  •  example
  •  add colors configurations
  •  add more positions like left, center and right
  •  support hide or show the component with an animation
  •  change plus icon to be customizable
  •  use components as icon
  •  hide background
  •  open on mounting
  •  allow user defined animations
  •  use crazy animations