Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
rn-fab
Advanced tools
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 41 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.