Skip to content

Latest commit

 

History

History
105 lines (94 loc) · 2.83 KB

README.md

File metadata and controls

105 lines (94 loc) · 2.83 KB

RN Fab GitHub license

Simple React Native Floating Action Button with NativeDriver for high-performance animations and Ripple effect for button touch style. 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
  {
    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}>
  <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.