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:

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

Actions

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
• migrate to TypeScript
• allow user defined animations
• use crazy animations