Nanobot: Polygonal Mascot

    rn-fab

    0.0.6 • Public • Published

    rn-fab GitHub license

    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.

    Install

    npm i rn-fab

    DownloadsWeekly Downloads

    26

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    407 MB

    Total Files

    20123

    Last publish

    Collaborators

    • gusilveiramp