0.0.2 • Published 4 years ago

@lucasmrc435/rn-fab v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

@lucasmrc435/rn-fab

React Native Floating Action Button

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>
    );
}

Floating Action Button

Props

PropertyTypeDefaultDescription
colorString#049bdbFAB's Color
positionStringrightFAB's position
iconStringplusFAB's Icon
iconColorStringwhiteIcon's Color
OnPressFunctionnullFAB'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