react-native-floating-action-bar

A React Native floating action bar.

Horizontal action bar	Vertical action bar

Installation

npm

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

yarn

$ 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

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}
/>

Interface

items

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
}

offset (optional)

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

position (optional)

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.

onPress (optional)

Accepts a function. returns the selected index.

selectedIndex (optional)

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

style (optional)

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.