Scrollable Float action button for React Native with NativeDriver for high-performance animations.
npm install rn-scrolling-fabScrollable Float action button for React Native with NativeDriver for high-performance animations.
Table of Content:
- How it looks
- Installation
- Example (local)
- How to use it
- Reference
- Props
- Actions Props
- TODO

```
npm i rn-scrolling-fab --save
or
``
yarn add rn-scrolling-fab
Take a look into example folder
To execute the example using Expo run the following command:
`bash`
yarn run run:example
Step 1: Import the FloatingAction component:
`javascript`
import { FloatingAction } from "rn-scrolling-fab";
Second step: define the buttons
`javascript`
const actions = [
{
key: "bt_home",
icon: require("./images/ic_home_white.png"),
},
{
key: "bt_favorite",
icon: require("./images/ic_favorite_white.png"),
},
{
key: "bt_news",
icon: require("./images/ic_news_white.png"),
},
{
key: "bt_video",
icon: require("./images/ic_video_white.png"),
}
];`
or pass icon as componentjavascript`
const actions = [
{
key: "UK",
icon:
},
{
key: "CA",
icon:
},
{
key: "DE",
icon:
},
{
key: "USA",
icon:
}
];
Third step: use it
`javascriptselected button: ${key}
onPressItem={key => {
console.log();`
}}
/>
- Default: []
Actions to be displayed when the main Floating Action Button is pressed. See ActionsProps section for more information about the ActionsProps keys and values.
- Default: screenWidth * 0.13
The size of the Floating Action Button.
- Default: false
Determines whether the actions are displayed vertically as a Vertical Fab or horizontally. By default, it is set to display horizontally.
- Default: false
Determines whether the Floating Action Button is hidden. By default, it is visible.
- Default: rgba(24,24,24,0.5)
The color of the Floating Action Button. Pass this ColorValue as a hexadecimal color respecting the default format.
- Default: rgba(0,0,0,0.1)
The overlay color of the Floating Action Button. Pass this ColorValue as a hexadecimal color respecting the default format.
- Default: false
Determines whether the overlay is hidden. By default, the overlay is visible.
- Default: right
The position of the Floating Action Button, either Position.LEFT or Position.RIGHT.
- Default: PixelRatio.get() * 10
The bottom space of the Floating Action Button.
- Default: PixelRatio.get() * 10
The horizontal space of the Floating Action Button. If the position is left, then the space from the left edge of the screen.
- Default: null
The icon of the Floating Action Button. It can be a React element, an image source, or null. By default, the icon is a plus icon.
- Default: 0.5
The size of the Floating Action Button icon. It can be a value between 0 and 1.
- Default: #f5f5f5
The color of the Floating Action Button icon.
- Default: undefined
Callback function to be called when an action item is pressed.
- @param key: The key of the pressed action item.
- Default: rgba(245,245,245,0.1)
The color of the ripple effect for Android and opacity effect for iOS when an action item is pressed.
- Default: undefined
Callback function to be called when the main Floating Action Button is pressed.
- @param actionType: The type of the Floating Action Button press action.
- Default: false
Determines if the keyboard should be dismissed when an action item is pressed.
javascript
{
shadowColor: 'rgba(0,0,0, 0.6)',
shadowOffset: {
width: 7,
height: 7
},
shadowOpacity: 1,
shadowRadius: 17,
elevation: size / 3
}
ActionsProps
####
icon: ReactElement | ImageSourcePropType | nullThe icon of the action item.
It can be a React element, an image source, or null.
####
key: string`The key of the action item.
- [x] first implementation
- [x] example
- [x] change plus icon to be customizable
- [x] migrate to TypeScript
- [ ] add more positions.
- [ ] support hide or show the component with an animation
- [ ] open on mounting