A React Native Fab Button Component built using react-native animations providing the user ability to add buttons and customize them accordingly.
Kindly install @react-native-vector-icons before you start using this component.
-
yarn add rn-fab-button
npm i rn-fab-button
import { FloatingButton } from "rn-fab-button";
<FloatingButton
noOfButtons={2}
icons={["example", "example"]}
size={20}
toggleBtnSize={20}
width={40}
height={40}
onPress={() => console.log("running")}
buttonBgColor={"green"}
toggleButtonStyle={{ backgroundColor: "#8B008B" }}
iconColor="white"
/>;
Prop | Description | Type | Default |
---|---|---|---|
noOfButtons |
No of buttons to be displayed | Number | Required |
icons |
Takes an array of name of icons to renders into the buttons. Receives an object with array {['example','example']} |
Arryay | Required |
width |
Width in pixels for the fab buttons, same for all of them | Number | Required for background of the icons |
height |
height in pixels for the fab buttons | Number | Required for background of the icons |
toggleBtnSize |
Size of the toggle button | Number | **Required ** |
buttonBgColor |
background color of the buttons | String | Optional |
toggleButtonStyle |
styling for the toggle buttons | String | Optional |
iconColor |
color of the fab button icons | String | Required |
size |
size of the fab buttons | Number | Requried |
onPress |
callback when the fab button is pressed | function | Optional |
Written by Rachit Sharma (masquerade-x)