Neurosis Prevention Mechanism
    Have ideas to improve npm?Join in the discussion! »

    react-floting-button

    1.0.1 • Public • Published

    react-floting-button

    Floating button for React Native

    Installation

    yarn add react-floting-button

    Or

    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

    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 Default 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 ..

    Install

    npm i react-floting-button

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    9.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar