Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-native-two-way-list
Advanced tools
React Native FlatList and SectionList wrappers that support adding data to the top
This is a project based off the need to support infinite scrolling in two directions.
FlatList
and SectionList
already support infinite scrolling well in one direction (down by default).
They do this with an onEndReached
function that is passed by the caller. Whenever the user nears
the end of the list, the function is called, which usually loads more data, and appends it to the
end of the list data. The scroll position is maintained when the list updates, and the scroll seams pretty seamless.
These components effectively do the same for the start of the list. When a user approaches the start,
the onStartReached
callback is fired, and can load more data. Whenever new data is added,
the lists see how much was added and set the scroll position of the list as closely as possible to where
the user was before data was added.
Props
Can be used with all of ReactNative's SectionList/FlatList props in addition to the following
Prop Name | Type | Default |
---|---|---|
onStartReached | (void) => any | |
onStartReachedThreshold | number | 0 |
onStartReached
Function to fire when the user scrolls into the region defined by onStartReachedThreshold
(or the very beginning if not defined). Only fires when user is scrolling toward the start.
Note: This function is called once per scroll, meaning once in the drag or once in the resulting momentum that brings the scrollview within the start threshold.
onStartReachedThreshold
How far from the start (in units of visible length of the list) the start edge of the list must be from the start of the content to trigger the onStartReached
callback. A value of 0.5 will trigger onStartReached
when the start of the content is within half the visible length of the list. A Value of 0 will only fire the callback when the user is at the very start of the list (or above it from bouncing).
Note: if this is 0/undefined AND bounces={false}
AND initialScrollIndex
is not > 0, the user will have to scroll down and back up to trigger the callback. It is not fired if the list is at the start already, and there's no way to scroll up (from bounce
)
npm i
Working examples of these components in a react-native project can be found in the /examples
directory. To run them, cd
to the example you want to run and...
npm i
react-native run-ios
FAQs
React Native FlatList and SectionList wrappers that support adding data to the top
We found that react-native-two-way-list 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
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.