rn-fab v0.0.6

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

Fab Action Buttons Specifications

License

MIT © - See LICENSE for more information.