npm:react-floting-button

README

react-floting-button

Floating button for React Native

Installation

yarn add react-floting-button

npm install react-floting-button

How to use it

first step: import the component: import {FloatingButton} from "react-floting-button"

Second step: define the buttons

const actions = [
  {
    text: "Reload",
    icon: "reload",
    link: 'callback',
    size:20,
    color:'#555',
    position: 1,
  },
  {
    text: "Order",
    icon: "food-fork-drink",
    link: "foofScreen",
    size:20,
    color:'#555',
    position: 2
  },
]

Third step: use it

<FloatingButton
          actions={actions}
          text="$17.00"
          title="pay"
          navigation={navigation}
/>

Example of how Expo looks

EXemple

import {FloatingButton} from "react-floting-button" ;
const actions = [
  {
    text: "Reload",
    icon: "reload",
    link: 'callback',
    size:20,
    color:'#555',
    position: 1,
  },
  {
    text: "Order",
    icon: "food-fork-drink",
    link: "foofScreen",
    size:20,
    color:'#555',
    position: 2
  },
]


export default class  App extends Component {
    constructor(props){
        super(props)
    }
  render(){
  const {navigation} = this.props ;
    return (
      <View style={styles.container}>

        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
          <Text>Ici button exemple</Text>
        </View>

        <FloatingButton
          actions={actions}
          text="$17.00"
          title="pay"
          navigation={navigation}
        />
      </View>
    ) ;
}

Configuration

FloatingButton

Property	Type	Default	Description
actions	array	[]	Actions to be show once user press the main button
color	string	#FFF	Color of the main button
backgroundColor	string	#00B15E	background color of the main button
AnimatedbackgroundColor	string	rgba(0,0,0,.2)	background color of view animated
text	string		Title of main button is Required
title	string		label of main button when is clicked is Required
navigation	object		navigation props is Required when you are linked button to another screen

Actions

Property	Type	Description
text	string	Text to show near to the button.
icon	string	Icon to be rendered inside the action, we accept the name of icon refer to 'react-native-vector-icons/MaterialCommunityIcons'
link	string	the screen name where you want to go once the button click (route name)
size	number	size of Icon
color	string	Color of the Icon button
position	string	element positioning, at which position to display each button first, second or ..

Usage no npm install needed!