
Research
/Security News
Toptal’s GitHub Organization Hijacked: 10 Malicious Packages Published
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
rn-scrolling-fab
Advanced tools
Scrollable Float action button for React Native with NativeDriver for high-performance animations.
Scrollable Float action button for React Native with NativeDriver for high-performance animations.
Table of Content:
npm i rn-scrolling-fab --save
or
yarn add rn-scrolling-fab
Take a look into example folder
To execute the example using Expo run the following command:
yarn run run:example
Step 1: Import the FloatingAction
component:
import { FloatingAction } from "rn-scrolling-fab";
Second step: define the buttons
const actions = [
{
key: "bt_home",
icon: require("./images/ic_home_white.png"),
},
{
key: "bt_favorite",
icon: require("./images/ic_favorite_white.png"),
},
{
key: "bt_news",
icon: require("./images/ic_news_white.png"),
},
{
key: "bt_video",
icon: require("./images/ic_video_white.png"),
}
];
or pass icon as component
const actions = [
{
key: "UK",
icon: <Text>🇬🇧</Text>,
},
{
key: "CA",
icon: <Text>🇨🇦</Text>,
},
{
key: "DE",
icon: <Text>🇩🇪</Text>,
},
{
key: "USA",
icon: <Text>🇺🇸</Text>,
}
];
Third step: use it
<View style={styles.container}>
<Text style={styles.example}>Floating Action example</Text>
<FloatingAction
actions={actions}
onPressItem={key => {
console.log(`selected button: ${key}`);
}}
/>
</View>
actions: Array<ActionsProps>
Default: []
Actions to be displayed when the main Floating Action Button is pressed. See ActionsProps section for more information about the ActionsProps
keys and values.
size: number
Default: screenWidth * 0.13
The size of the Floating Action Button.
isVertical: boolean
Default: false
Determines whether the actions are displayed vertically as a Vertical Fab or horizontally. By default, it is set to display horizontally.
isHidden: boolean
Default: false
Determines whether the Floating Action Button is hidden. By default, it is visible.
tintColor: ColorValue
Default: rgba(24,24,24,0.5)
The color of the Floating Action Button. Pass this ColorValue
as a hexadecimal color respecting the default format.
overlayColor: ColorValue
Default: rgba(0,0,0,0.1)
The overlay color of the Floating Action Button. Pass this ColorValue
as a hexadecimal color respecting the default format.
hideOverlay: boolean
Default: false
Determines whether the overlay is hidden. By default, the overlay is visible.
position: Position
Default: right
The position of the Floating Action Button, either Position.LEFT
or Position.RIGHT
.
bottomSpace: DimensionValue
Default: PixelRatio.get() * 10
The bottom space of the Floating Action Button.
horizontalSpace: DimensionValue
Default: PixelRatio.get() * 10
The horizontal space of the Floating Action Button. If the position is left, then the space from the left edge of the screen.
floatingIcon: ReactElement | ImageSourcePropType | null
Default: null
The icon of the Floating Action Button. It can be a React element, an image source, or null. By default, the icon is a plus icon.
floatingIconSize: number between 0 and 1
Default: 0.5
The size of the Floating Action Button icon. It can be a value between 0 and 1.
floatingIconColor: ColorValue
Default: #f5f5f5
The color of the Floating Action Button icon.
onPressItem: (key: string) => void
Default: undefined
Callback function to be called when an action item is pressed.
@param
key: The key of the pressed action item.rippleColor: ColorValue
Default: rgba(245,245,245,0.1)
The color of the ripple effect for Android and opacity effect for iOS when an action item is pressed.
onPressMain: (actionType: FloatingIconPressActions) => void
Default: undefined
Callback function to be called when the main Floating Action Button is pressed.
@param
actionType: The type of the Floating Action Button press action.dismissKeyboardOnPress: boolean
Default: false
Determines if the keyboard should be dismissed when an action item is pressed.
shadow: ViewStyle
The shadow style of the floating action button.
{
shadowColor: 'rgba(0,0,0, 0.6)',
shadowOffset: {
width: 7,
height: 7
},
shadowOpacity: 1,
shadowRadius: 17,
elevation: size / 3
}
icon: ReactElement | ImageSourcePropType | null
The icon of the action item. It can be a React element, an image source, or null.
key: string
The key of the action item.
FAQs
Scrollable Float action button for React Native with NativeDriver for high-performance animations.
The npm package rn-scrolling-fab receives a total of 0 weekly downloads. As such, rn-scrolling-fab popularity was classified as not popular.
We found that rn-scrolling-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.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.