React Native Scrolling FAB

Scrollable 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

How it looks

Installation

``
npm i rn-scrolling-fab --save
`

or

`
yarn add rn-scrolling-fab
`

Example

Take a look into example folder

To execute the example using Expo run the following command:

`bash
yarn run run:example
`




How to use it

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 component
`javascript
const actions = [
{
key: "UK",
icon: 🇬🇧,
},
{
key: "CA",
icon: 🇨🇦,
},
{
key: "DE",
icon: 🇩🇪,
},
{
key: "USA",
icon: 🇺🇸,
}
];
`
Third step: use it

`javascript

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

`

Reference

Props

$3

- 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.

$3

- Default: screenWidth * 0.13

The size of the Floating Action Button.

$3

- Default: false

Determines whether the actions are displayed vertically as a Vertical Fab or horizontally. By default, it is set to display horizontally.

$3

- Default: false

Determines whether the Floating Action Button is hidden. By default, it is visible.

$3

- 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.

$3

- 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.

$3

- Default: false

Determines whether the overlay is hidden. By default, the overlay is visible.

$3

- Default: right

The position of the Floating Action Button, either Position.LEFT or Position.RIGHT.

$3

- Default: PixelRatio.get() * 10

The bottom space of the Floating Action Button.

$3

- 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.

$3

- 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.

$3

- Default: 0.5

The size of the Floating Action Button icon. It can be a value between 0 and 1.

$3

- Default: #f5f5f5

The color of the Floating Action Button icon.

$3

- Default: undefined

Callback function to be called when an action item is pressed.
- @param key: The key of the pressed action item.

$3

- 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.

$3

- 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.

$3

- Default: false

Determines if the keyboard should be dismissed when an action item is pressed.

$3


The shadow style of the floating action button.
- Default:
`javascript
{
shadowColor: 'rgba(0,0,0, 0.6)',
shadowOffset: {
width: 7,
height: 7
},
shadowOpacity: 1,
shadowRadius: 17,
elevation: size / 3
}

ActionsProps

#### icon: ReactElement | ImageSourcePropType | null

The icon of the action item.
It can be a React element, an image source, or null.

#### key: string`

The key of the action item.

TODO

- [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