react-native-floating-action-bar

A React Native floating action bar.

| Horizontal action bar | Vertical action bar |
| :--------------------------------------------------------: | :----------------------------------------------------: |
| !Horizontal action bar | !Vertical action bar |

Installation

_npm_

``shell
$ npm i react-native-floating-action-bar --save
`

_yarn_

`shell
$ yarn add react-native-floating-action-bar
`

_Additional package install_

This project depends (for now) on react-native-vector-icons. If you dont have this package already in your project, please add this by following react-native-vector-icons installation instructions.

Usage

_import_

`javascript
import FloatingActionBar from 'react-native-floating-action-bar';
`

_basic_

`javascript
items={[{icon: 'taxi'}, {icon: 'subway'}, {icon: 'train'}, {icon: 'bus'}]}
onPress={handlePress}
/>
`

_maxed out_

`javascript
items={[
{
icon: 'taxi',
color: 'rgb(130, 130, 130)',
activeColor: 'rgb(3, 137, 253)',
activeBackgroundColor: 'rgb(224, 243, 255)',
},
{
icon: () => ,
color: 'rgb(130, 130, 130)',
activeColor: 'rgb(3, 137, 253)',
activeBackgroundColor: 'rgb(224, 243, 255)',
},
{
icon: ({active}) => (
name="train"
color={active ? 'rgb(3, 137, 253)' : 'rgb(130, 130, 130)'}
/>
),
color: 'rgb(130, 130, 130)',
activeColor: 'rgb(3, 137, 253)',
activeBackgroundColor: 'rgb(224, 243, 255)',
},
{
icon: ({active, activeColor, color, icon, size}) => (

),
color: 'rgb(130, 130, 130)',
activeColor: 'rgb(3, 137, 253)',
activeBackgroundColor: 'rgb(224, 243, 255)',
},
]}
offset={50}
onPress={handlePress}
position="bottom"
selectedIndex={0}
style={styles.floatingActionBar}
/>
`

Interface

$3

Accepts an array with objects. The object is used to generate and style the action bar items.

_item interface_

`
{
icon: 'taxi' || Your own icon render function,
color: 'rgb(130, 130, 130)', // optional
activeColor: 'rgb(3, 137, 253)', // optional
activeBackgroundColor: 'rgb(224, 243, 255)', // optional
}
`

$3

Accepts a number. Offsets the action bar by given number.

$3

Accepts a string containing one of these types: top, bottom, left, right.
This property positions the action bar to the given position. With top or bottom the action bar renders as a row, with left or right` the action bar renders as a column.

$3

Accepts a function. returns the selected index.

$3

Accepts an int. Can be used to set initial index.

$3

Accepts a StyleSheet style or an object. This allows you to style the container.

Contributing

Issues are welcome. The best way to report a problem is to reproduce it with a code example.

Pull requests are welcome. If you want to change the API, it's better to discuss it using an issue ticket.

License

react-native-floating-action-bar is MIT licensed.