npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gifyourgame/react-native-floating-action

v1.19.2

Published

Simple (FAB) floating action component for react-native

Downloads

12

Readme

react-native-floating-action

Floating action button for React Native

Expo example

Open the following click on your phone: Expo link

or user your phone and scan the following QR:

Example of how Expo looks

Installation

npm i react-native-floating-action --save

or

yarn add react-native-floating-action

Example

Take a look into example/ReactNativeFloatingAction-Expo

To execute the example using Expo run the following command:

yarn run run:example

or open Expo link from your mobile

How to use it

First step: import the component:

import { FloatingAction } from "react-native-floating-action";

Second step: define the buttons

const actions = [
  {
    text: "Accessibility",
    icon: require("./images/ic_accessibility_white.png"),
    name: "bt_accessibility",
    position: 2
  },
  {
    text: "Language",
    icon: require("./images/ic_language_white.png"),
    name: "bt_language",
    position: 1
  },
  {
    text: "Location",
    icon: require("./images/ic_room_white.png"),
    name: "bt_room",
    position: 3
  },
  {
    text: "Video",
    icon: require("./images/ic_videocam_white.png"),
    name: "bt_videocam",
    position: 4
  }
];

Third step: use it

<View style={styles.container}>
  <Text style={styles.example}>Floating Action example</Text>
  <FloatingAction
    actions={actions}
    onPressItem={name => {
      console.log(`selected button: ${name}`);
    }}
  />
</View>

Open and hide it programatically

There are some cases where you want to show or hide the component without pressing the main button:

<FloatingAction
  ref={(ref) => { this.floatingAction = ref; }}
  actions={[...]}
  ...
/>

and then:

this.floatingAction.animateButton();

Configuration

FloatingAction

| Property | Type | Default | Description | | ----------------------- | ---------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | actions | array | [] | Actions to be show once user press the main button | | color | string | #1253bc | Color of the main button | | distanceToEdge | number or object | 30 | Distance from button to edge. Can be a number or { vertical: Number, horizontal: Number } object. | | visible | boolean | true | Hide or Show the component using an animation | | overlayColor | string | rgba(68, 68, 68, 0.6) | Color of the background overlay | | position | string | right | Position to render the main button and actions, options: (left, right, center) | | overrideWithAction | string | false | Override the main action with the first action inside list actions, will not show other action | | floatingIcon | node | ReactElement | | Change the default plus icon using require(pathToImage) or ReactElement | | showBackground | boolean | true | Show or Hide background after open it | | openOnMount | boolean | false | Open component after mounting it, useful on some weird cases like tutorials | | actionsPaddingTopBottom | number | 8 | Change distance between actions | | iconWidth | number | 15 | Icon width of the main button | | iconHeight | number | 15 | Icon height of the main button | | iconWeight | number | 2 | Icon weight of the main button | | buttonSize | number | 56 | Size of the main button | | listenKeyboard | boolean | false | Change position when the keyboard will appear | | dismissKeyboardOnPress | boolean | false | Dismiss keyboard when user press on the main button | | shadow | object | { shadowOpacity: 0.35, shadowOffset: { width: 0, height: 5 }, shadowColor: "#000000", shadowRadius: 3 } | Change how we render the shadow of every button, this style will apply to the main button and to every action button | | onPressItem | function | | Function to be call as soon as the user select an option from actions. Will return the name of the action. | | onPressMain | function | | Function to be call as soon as use click main button and will return true or false depeneding of the state. | | onPressBackdrop | function | | Function to be call as soon as the backdrop is clicked. | | onClose | function | | Function to be call after set state to false | | onOpen | function | | Function to be call after set state to true | | onStateChange | function | | Function to be call after every state change. Will return state object | | animated | boolean | true | Enable the animation |

Actions

| Property | Type | Default | Description | | -------------- | ------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | color | string | #1253bc | Color of the action button | | icon | any | | Icon to be rendered inside the action, will accept an URL or React.Image. If we want to send an URL we need to send it in this way: icon: { uri: 'https://imageurl.com' } if we want to send a React.Image we will use it in this way: icon: require('path/image') | | name | string | | Name of the icon, this name is used as parameter for onPressItem action | | buttonSize | number | 40 | Size of of the action button | | text | string | | Text to show near to the button. (Only apply for position = ['left', 'right']) | | textStyle | object/array | { fontSize: 12 } | Style to update text size | | textBackground | string | #ffffff | Background color for Text container | | textColor | string | #444444 | Text color for every action | | textElevation | number | 5 | Elevation property (also modifies "shadowOffset" in iOS) | | render | function | | Custom render function for Action. If provided, other properties are not applicable. The provided function should return a React Node | | margin | number | 8 | Additional margin for action. This property is useful when we want to override the current margin for example using custom render | | size | number | 40 | Size of of the icon rendered inside the action |

TODO

  • [x] first implementation
  • [x] example
  • [x] add colors configurations
  • [x] add more positions like left, center and right
  • [x] support hide or show the component with an animation
  • [x] change plus icon to be customizable
  • [x] use components as icon
  • [x] hide background
  • [x] open on mounting
  • [ ] migrate to TypeScript
  • [ ] allow user defined animations
  • [ ] use crazy animations