React Native Floating Action

Floating action button for React Native

Table of Content:

- Expo example
- Example of how Expo looks
- Installation
- Example (local)
- How to use it
- Open and Hide it programatically
- Reference
- Props
- actions Props
- TODO

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:

`bash
yarn run run:example
`

or open Expo link from your mobile

How to use it

First step: import the component:

`javascript
import { FloatingAction } from "react-native-floating-action";
`

Second step: define the buttons

`javascript
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

`javascript

Floating Action example
actions={actions}
onPressItem={name => {
console.log(selected button: ${name});
}}
/>

`

$3

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

`javascript
ref={(ref) => { this.floatingAction = ref; }}
actions={[...]}
...
/>
`

and then:

`javascript
this.floatingAction.animateButton();
`

Reference

Props

#### actions: Array