@hedviginsurance/react-native-floating-action
v1.13.1
Published
floating action component for react-native - fork by hedviginsurance
Downloads
17
Readme
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
| Property | Type | Default | Description | |-------------------------|-----------------------|-----------------------|---------------------------------------------------------------------------------------------------------------------| | actions | array | [] | Actions to be show once user press the main button | | color | string | #1253bc | Color of the main button | | distanceToEdge | number | 30 | Distance from button to edge | | visible | boolean | true | Hide or Show the component using an animation | | overlayColor | string | rgba(68, 68, 68, 0.6) | Color of the background overlay | | position | string | right | Position to render the main button and actions, options: (left, right, center) | | overrideWithAction | string | false | Override the main action with the first action inside list actions, will not show other action | | floatingIcon | node | ReactElement | | Change the default plus icon using require(pathToImage) or ReactElement | | showBackground | boolean | true | Show or Hide background after open it | | openOnMount | boolean | false | Open component after mounting it, useful on some weird cases like tutorials | | actionsPaddingTopBottom | number | 8 | Change distance between actions | | iconWidth | number | 15 | Icon width of the main button | | iconHeight | number | 15 | Icon height of the main button | | listenKeyboard | boolean | false | Change position when the keyboard will appear | | dismissKeyboardOnPress | boolean | false | Dismiss keyboard when user press on the main button | | onPressItem | function | | Function to be call as soon as the user select an option from actions. Will return the name of the action. | | onPressMain | function | | Function to be call as soon as use click main button and will return true or false depeneding of the state. | | onPressMain | function | | Function to be call as soon as use click main button and will return true or false depeneding of the state. | | onPressBackdrop | function | | Function to be call as soon as the backdrop is clicked. |
Actions
| Property | Type | Default | Description | |-----------------------|--------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | color | string | #1253bc | Color of the action button | | icon | any | | Icon 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') | | name | string | | Name of the icon, this name is used as parameter for onPressItem action | | text | string | | Text to show near to the button. (Only apply for position = ['left', 'right']) | | textBackground | string | #ffffff | Background color for Text container | | textColor | string | #444444 | Text color for every action | | textElevation | number | 5 | Elevation property (only android) | | render | function | | Custom render function for Action. If provided, other properties are not applicable. The provided function should return a React Node | | margin | number | 8 | Additional margin for action. This property is useful when we want to override the current margin for example using custom render | size | number | 40 | size of of the icon rendered inside the action
TODO
- [x] first implementation
- [x] example
- [x] add colors configurations
- [x] add more positions like left, center and right
- [x] support hide or show the component with an animation
- [x] change plus icon to be customizable
- [x] use components as icon
- [x] hide background
- [x] open on mounting
- [ ] allow user defined animations
- [ ] use crazy animations