
Product
Introducing Socket MCP for Claude Desktop
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
react-native-swipeable
Advanced tools
A powerful React Native swipe component. Supports both iOS and Android.
npm i --save react-native-swipeable
Wrap your ListView/TableView items with the Swipeable
component:
import Swipeable from 'react-native-swipeable';
const leftContent = <Text>Pull to activate</Text>;
const rightButtons = [
<TouchableHighlight><Text>Button 1</Text></TouchableHighlight>,
<TouchableHighlight><Text>Button 2</Text></TouchableHighlight>
];
function MyListItem() {
return (
<Swipeable leftContent={leftContent} rightButtons={rightButtons}>
<Text>My swipeable content</Text>
</Swipeable>
);
}
prop | type | default | description |
---|---|---|---|
children | renderable | null | swipeable content |
leftContent | renderable | null | (optional) left content visible during pull action |
rightContent | renderable | null | (optional) right content visible during pull action |
leftButtons | renderable[] | null | (optional) array of buttons, first being the innermost; ignored if leftContent present |
rightButtons | renderable[] | null | (optional) array of buttons, first being the innermost; ignored if rightContent present |
leftActionActivationDistance | integer | 125 | (optional) minimum swipe distance to activate left action |
onLeftActionRelease | function | null | (optional) user has swiped beyond leftActionActivationDistance and released |
rightActionActivationDistance | integer | 125 | (optional) minimum swipe distance to activate right action |
onRightActionRelease | function | null | (optional) user has swiped beyond rightActionActivationDistance and released |
leftButtonWidth | integer | 75 | (optional) resting visible peek of each left button after buttons are swiped open |
rightButtonWidth | integer | 75 | (optional) resting visible peek of each right button after buttons are swiped open |
onRef | function | null | (optional) receive swipeable component instance reference |
onPanAnimatedValueRef | function | null | (optional) receive swipeable pan Animated.ValueXY reference for upstream animations |
Check out the Swipeable
component's propTypes
for a huge list of options including animation lifecycle hooks and low-level overrides.
Imperatively reset swipeable component back to initial position. This is useful if buttons are exposed and the user has begun scrolling the parent view.
class MyListItem extends Component {
swipeable = null;
handleUserBeganScrollingParentView() {
this.swipeable.recenter();
}
render() {
return (
<Swipeable onRef={ref => this.swipeable = ref} rightButtons={rightButtons}>
<Text>My swipeable content</Text>
</Swipeable>
);
}
}
To run the example:
npm run build
cd example
npm install
react-native run-ios # or run-android
MIT
FAQs
A powerful React Native swipe component
The npm package react-native-swipeable receives a total of 7,799 weekly downloads. As such, react-native-swipeable popularity was classified as popular.
We found that react-native-swipeable 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.
Product
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.