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-swipe-view
Advanced tools
Native container view for enabling swipe actions (for example to enable swipe to delete and such)
A native container which provides a smooth drag interaction with any react-native view to implement a horizontal swiping behaviour, for example: swiping a "card" view out of the screen to delete it.
Install from npm
:
npm i --save react-native-swipe-view
Now link the native libraries:
Add to the app build.gradle
dependencies:
compile project(':RNSwipeView')
Add to settings.gradle
:
include ':RNSwipeView'
project(':RNSwipeView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-swipe-view/android')
Add the package to your MainApplication.java getPackages
list:
import com.wix.RNSwipeView.SwipeViewPackage;
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
//add this pacakge:
new SwipeViewPackage()
);
}
};
In Xcode, drag the SwipeView.xcodeproj
from your node modules to the libraries list in the Project Navigator. Then add libSwipeView
to your app target "Linked Frameworks and Libraries"
react-native-swipe-view
export a Component called SwipeView
which you can use to wrap any hirarchy of child views that you wish to be contained and interacted with a swipe behavior.
For example:
//import the swipe view container
import {SwipeView} from 'react-native-swipe-view';
//use it in your render function
<SwipeView changeOpacity removeViewOnSwipedOut style={{borderWidth: 4}}>
<Text style={styles.welcome}>
This is a swipe view!
</Text>
<Text style={styles.instructions}>
Drag it to interact
</Text>
</SwipeView>
prop | default | type | description |
---|---|---|---|
changeOpacity | false | Boolean | Should the component change content alphw while dragging |
removeViewOnSwipedOut | false | Boolean | Should the component be removed from the hierarchy after it is swiped out |
minPanToComplete | 0.5 | Number | The distance from the view center which needs to be completed in percents for the "swipe out" action to happen. If the threshold is not reached it will bounce back |
bounceBackAnimDuration | 0.35 | Number | Duration of bounce back animation when the threshold defined in minPanToComplete is not matched |
bounceBackAnimDamping | 0.65 | Number | Damping param of iOS bounce back animation when the threshold defined in minPanToComplete is not matched |
onSwipeStart | - | Function | Callback function which is called when the swiping action starts. A direction param is provided wiht left or right value |
onWillBeSwipedOut | - | Function | Callback function which is called right before a view is swiped out (when it passed the minPanToComplete threshold). A direction param is provided wiht left or right value |
onSwipedOut | - | Function | Callback function which is called after the "swiped out" animation is done. A direction param is provided wiht left or right value |
onWillBounceBack | - | Function | Callback function which is called right before a view bounces back (when it fails to pass the minPanToComplete threshold). A direction param is provided wiht left or right value |
onBouncedBack | - | Function | Callback function which is called after the "bounce back" animation is done. A direction param is provided wiht left or right value |
FAQs
Native container view for enabling swipe actions (for example to enable swipe to delete and such)
We found that react-native-swipe-view demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers 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.