A React Native floating action bar.
A React Native floating action bar.
| Horizontal action bar | Vertical action bar |
| :--------------------------------------------------------: | :----------------------------------------------------: |
| !Horizontal action bar | !Vertical action bar |
_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.
_import_
`javascript`
import FloatingActionBar from 'react-native-floating-action-bar';
_basic_
`javascript`
onPress={handlePress}
/>
_maxed out_
`javascript`
{
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}) => (
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}
/>
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
}
Accepts a number. Offsets the action bar by given number.
Accepts a string containing one of these types: top, bottom, left, right.top
This property positions the action bar to the given position. With or bottom the action bar renders as a row, with left or right` the action bar renders as a column.
Accepts a function. returns the selected index.
Accepts an int. Can be used to set initial index.
Accepts a StyleSheet style or an object. This allows you to style the container.
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.
react-native-floating-action-bar is MIT licensed.