Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
rn-fab
Advanced tools
A simple React Native Floating Action Button using NativeDriver for animations.
Weekly downloads
Readme
Simple React Native Floating Action Button using NativeDriver for high-performance animations and Ripple effect for button. Works on iOS and Android.
Instale as dependências do backend
$ yarn add rn-fab
or
$ npm i rn-fab --save
Access the example folder and install de modules
cd examble && yarn install
run on android (or ios):
npx react-native run-android
Import the component:
import Fab from 'rn-fab';
Setup the buttons:
const actions = [
// Main button - does not need to receive the "text" property.
{
icon: <Image source={PlusIcon} style={styles.icon} />,
name: "btn_plus",
color: '#2a57c6'
},
// Action Buttons - will be displayed when you tap the main button.
{
text: "Details",
icon: <Image source={UserIcon} style={styles.icon} />,
name: "btn_detail",
color: '#ee4343'
},
{
text: "Favorites",
icon: <Image source={StarIcon} style={styles.icon} />,
name: "btn_favorite",
color: '#fdce4b'
}
];
Setup component:
<View style={styles.container}>
<Text style={styles.text}>RN Fab Example</Text>
<Fab
actions={actions}
style={{right: 40, bottom: 120}}
rotation={"45deg"}
onPress={name => {
if(name == "btn_detail"){
alert(`Hi, you clicked on ${name}`)
}
}}
/>
</View>
If you want the button on the right, just use:
style={right: 40, bottom: 150}}
or nothing to center it:
style={bottom: 150}}
Property | Type | Default | Description |
---|---|---|---|
actions | array | [] | Buttons that will be displayed when the user taps the fab button. |
onPress | function | null | Actions that will be performed when pressing each button. |
style | object | {} | Fab button main style. Setup position here. |
rotation | string | "45deg" | Degrees of rotation of the FAB button icon. |
Property | Type | Default | Description |
---|---|---|---|
text | string | null | Label text for action button. if it is null it will not be displayed. Does not apply to first item of array (main button) |
icon | any | null | Icon to be rendered inside the action button. Will accept React.Image. |
name | string | null | Name of the action button. This name is used as parameter for onPress action. |
color | string | #000 | Rotation degrees of the main button icon animation. |
MIT © - See LICENSE for more information.
FAQs
A simple React Native Floating Action Button using NativeDriver for animations.
The npm package rn-fab receives a total of 32 weekly downloads. As such, rn-fab popularity was classified as not popular.
We found that rn-fab demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.