rn-fab

Simple React Native Floating Action Button using NativeDriver for high-performance animations and Ripple effect for button. Works on iOS and Android.

Install

Instale as dependências do backend

$ yarn add rn-fab

or

$ npm i rn-fab --save

Example

Access the example folder and install de modules

cd examble && yarn install

run on android (or ios):

npx react-native run-android

Use it!

Import the component:

import Fab from 'rn-fab';

Setup the buttons:

const actions = [
  // Main button - does not need to receive the "text" property.
  {
    icon: <Image source={PlusIcon} style={styles.icon} />,
    name: "btn_plus",
    color: '#2a57c6'
  },
  // Action Buttons - will be displayed when you tap the main button.
  {
    text: "Details",
    icon: <Image source={UserIcon} style={styles.icon} />,
    name: "btn_detail",
    color: '#ee4343'
  },
  {
    text: "Favorites",
    icon: <Image source={StarIcon} style={styles.icon} />,
    name: "btn_favorite",
    color: '#fdce4b'
  }
];

Setup component:

<View style={styles.container}>
  <Text style={styles.text}>RN Fab Example</Text>
  <Fab
    actions={actions}
    style={{right: 40, bottom: 120}}
    rotation={"45deg"}
    onPress={name => {
      if(name == "btn_detail"){
        alert(`Hi, you clicked on ${name}`)
      }
    }}
  />
</View>

If you want the button on the right, just use:

style={right: 40, bottom: 150}}

or nothing to center it:

style={bottom: 150}}

Fab Component Specifications

| Property | Type | Default | Description | | -------- | ---- | ------- | ----------- | | actions | array | [] | Buttons that will be displayed when the user taps the fab button. | | onPress | function | null | Actions that will be performed when pressing each button. | | style | object | {} | Fab button main style. Setup position here. | | rotation | string | "45deg" | Degrees of rotation of the FAB button icon. |

Fab Action Buttons Specifications

| Property | Type | Default | Description | | -------- | ---- | ------- | ----------- | | text | string | null | Label text for action button. if it is null it will not be displayed. Does not apply to first item of array (main button) | | icon | any | null | Icon to be rendered inside the action button. Will accept React.Image. | | name | string | null | Name of the action button. This name is used as parameter for onPress action. | | color | string | #000 | Rotation degrees of the main button icon animation. |

License

MIT © - See LICENSE for more information.