@lucasmrc435/rn-fab

@lucasmrc435/rn-fab

React Native Floating Action Button

Install

Using npm

npm install @lucasmrc435/rn-fab --save

Using yarn

yarn add @lucasmrc435/rn-fab

Import

import FloatingActionButton from '@lucasmrc435/rn-fab'

Usage

    <FloatingActionButton 
    color="orange" 
    onPress={() => {
        console.log("FAB Pressed!");
    }}
    />

Example

import React from 'react';
import { View, Text } from 'react-native';

import FloatingActionButton from '@lucasmrc435/rn-fab'

const App = () => {
    return (
        <View> 
              <Text>Look at the FAB</Text>

              <FloatingActionButton 
                color="orange" 
                onPress={() => {
                    console.log("FAB Pressed!");
                }}
                />

                <FloatingActionButton 
                position="center"
                onPress={() => {
                    console.log("FAB Pressed!");
                }}
                />
                
                <FloatingActionButton 
                position="left"
                icon="wallet" 
                onPress={() => {
                    console.log("FAB Pressed!");
                }}
                />
        <View>
    );
}

Props

Property	Type	Default	Description
color	String	#049bdb	FAB's Color
position	String	right	FAB's position
icon	String	plus	FAB's Icon
iconColor	String	white	Icon's Color
OnPress	Function	null	FAB's onPress function

color

The color that will fill the FAB. Any color of StyleSheets and CSS

type : String

position

The FAB's position. Position can only be left | center | right

type : String

icon

The Icon that will appear inside the FAB. Any Icon from MaterialCommunityIcons

type : String

iconColor

The color that will fill the FAB's Icon

type : String

onPress

The function that is called when the button is activated.

type : Void Function