Easy to use swipeable component for React Native built on top of react-native-gesture-handler/Swipeable, support both iOS and Android.
-
First install
react-native-gesture-handler
-
Add
rn-simple-swipe
to your project:
npm i --save react-native-swipeable
or
yarn add rn-simple-swipe
Check out full example
import Swipeable from 'rn-simple-swipe'
const SwipeableComponent = () => {
const rightActions = [
{
label: 'Add',
color: '#8daef0',
onPress: () => Alert.alert(`Add ${first_name}`),
children: <FontAwesome name='plus' size={30} color='#fff' />,
},
{
label: 'Remove',
color: '#f07067',
onPress: () => Alert.alert(`Remove ${first_name}`),
children: <FontAwesome name='trash-o' size={30} color='#fff' />,
},
]
const leftAction = {
label: 'Boo',
onPress: () => alert('Boo'),
icon: <FontAwesome name='snapchat-ghost' size={30} color='#fff' />,
}
return (
<Swipeable rightActions={rightActions} leftAction={leftAction}>
<View style={styles.item}>
<Text>My Swipeable component</Text>
</View>
</Swipeable>
)
}
prop | type | default | description |
---|---|---|---|
rightActions |
Array [RightActionsProps] | [] |
Right swipe action buttons props |
leftAction |
Object {LeftActionProps} | {} |
Left swipe button props |
prop | type | default | required | description |
---|---|---|---|---|
label |
String | '' |
true | Text label for the action button |
color |
String | transparent |
false | Action button background color |
width |
Number | 75 |
false | Action button width |
style |
Object | {} |
false | Additional action button style |
onPress |
Fun | undefined |
false | On action button press callback |
children |
Element | undefined |
false | Custom action button children (you can render icon here for instance) |
labelColor |
String | #fff |
false | Label text color |
labelStyle |
Object | {} |
false | Label text style |
{
label: PropTypes.string.isRequired,
color: PropTypes.string,
onPress: PropTypes.func,
children: PropTypes.element,
style: PropTypes.object,
width: PropTypes.number,
labelColor: PropTypes.string,
labelStyle: PropTypes.object,
}
prop | type | default | required | description |
---|---|---|---|---|
label |
String | '' |
true | Text label for the action button |
color |
String | transparent |
false | Button background color |
icon |
Element | undefined |
false | Icon that will be render before label |
style |
Object | {} |
false | Additional button style |
onPress |
Fun | undefined |
false | On button press callback |
children |
Element | undefined |
false | Custom children |
labelColor |
String | #fff |
false | Label text color |
labelStyle |
Object | {} |
false | Label text style |
{
label: PropTypes.string.isRequired,
color: PropTypes.string,
onPress: PropTypes.func,
children: PropTypes.element,
style: PropTypes.object,
labelColor: PropTypes.string,
labelStyle: PropTypes.object,
icon: PropTypes.element,
}
To run the example
npm run build
cd example
npm install
react-native run-ios # or run-android
rn-simple-swipe's People
rn-simple-swipe's Issues
Update docs
Add tests
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.