A React Native floating action bar.
| Horizontal action bar | Vertical action bar |
|---|---|
 |
 |
npm
$ npm i react-native-floating-action-bar --saveyarn
$ yarn add react-native-floating-action-barAdditional 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
import FloatingActionBar from 'react-native-floating-action-bar';basic
<FloatingActionBar
items={[{icon: 'taxi'}, {icon: 'subway'}, {icon: 'train'}, {icon: 'bus'}]}
onPress={handlePress}
/>maxed out
<FloatingActionBar
items={[
{
icon: 'taxi',
color: 'rgb(130, 130, 130)',
activeColor: 'rgb(3, 137, 253)',
activeBackgroundColor: 'rgb(224, 243, 255)',
},
{
icon: () => <Icon name="subway" />,
color: 'rgb(130, 130, 130)',
activeColor: 'rgb(3, 137, 253)',
activeBackgroundColor: 'rgb(224, 243, 255)',
},
{
icon: ({active}) => (
<Icon
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}) => (
<Icon name={icon} size={size} color={active ? activeColor : color} />
),
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.
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.
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.