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