JSPM

react-native-action-floating-button

1.0.7
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 11
  • Score
    100M100P100Q46778F
  • License MIT

A simple floating button for react native with nested button

Package Exports

  • react-native-action-floating-button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-action-floating-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Example Image

Basic Usage

import {
  FloatingButton,
  FloatingButtonChild,
} from "react-native-action-floating-button";

const Floating = () => (
  <FloatingButton
    hasChildren={false}
    icon={<Text>{/*Here your Icon*/}</Text>}
    background="blue"
    onPress={() => foo()}
  />
);

Usage With Children

import {
  FloatingButton,
  FloatingButtonChild,
} from "react-native-action-floating-button";

const Floating = () => (
  <FloatingButton
    hasChildren={true}
    icon={<Text>{/*Here your Icon*/}</Text>}
    backgroundColor="blue"
  >
    <FloatingButtonChild backgroundColor="blue" title="Tooltip message">
      <Text>{/*Here your Icon*/}</Text>
    </FloatingButtonChild>
  </FloatingButton>
);

Props

Floating Child

Options Default Value How To use
backgroundColor red rgb or hex Use to change the color of the button
hasChildren true true, false If true instead of using onPress it opens the floatingButtonChild
onPress none method Use to change the behavior when it's pressed with hasChildren on false.
icon none Text Use to display some text or icon
padding 10 Number Use to add padding
alignItems flex-end flex-start,center,flex-end Use to choose where you want to put the button
[children] none Create the FloatingButtonChild as children of a FloatingButton
shadow none css style Use to set the shadow of the button

FloatingButtonChild

Options Default Value How To use
backgroundColor red rgb or hex Use to change the color of the button
title none string Use to change the tooltip
[children] none Use to change the icon or text of the button
shadow none css style Use to set the shadow of the button
flexDirection row row, row-reverse Set to row-reverse to reverse the button and tooltip position

Bug

-Shadow Box during the fade in

ChangeLog:

  • Add Shadow on the button
  • Implemented button on right position