Skip to content

Commit

Permalink
Added example file.
Browse files Browse the repository at this point in the history
  • Loading branch information
khorark committed Aug 4, 2019
1 parent 5d52f26 commit c417d21
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 2 deletions.
6 changes: 4 additions & 2 deletions README.MD
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,11 @@ function MyListItem() {

## Example

For example used view Example/index.js file.

## License

MIT

[npm-image]: https://badge.fury.io/js/%40khorark%2Frn-swipeable-flatlist.svg
[npm-url]: https://www.npmjs.com/package/@khorark/rn-swipeable-flatlist
[npm-image]: https://badge.fury.io/js/rn-swipeable-flatlist.svg
[npm-url]: https://www.npmjs.com/package/rn-swipeable-flatlist
63 changes: 63 additions & 0 deletions src/Example/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, { useState, useCallback } from 'react';
import { View, StyleSheet, Text, Image } from 'react-native'
import SwipebeList from 'rn-swipeable-flatlist'


const SwipeApp = () => {
const [ data, changeData ] = useState(Array.from({ length: 50 }, (_, idx) => idx))
const changeDataHandle = useCallback((id) => {
changeData(data.filter(v => v !== id));
}, [data.length])

return (
<View style={styles.container}>
<SwipebeList
data={data}
renderItem={({ item }) => (
<View style={styles.row}>
<Text style={styles.text}>{item}</Text>
</View>
)}
keyExtractor={(item => item.toString())}
duration={500}
leftView={<Image style={styles.image} source={require('./assets/22_-_Tick-512.png')}/>}
rightView={<Image style={styles.image} source={require('./assets/Trash-Email-Bin-512.png')}/>}
leftColor={'#08D964'}
rightColor={'#e52c88'}
onSwipeLeft={(id) => {
console.log('Left => ', id)
changeDataHandle(id)
}}
onSwipeRight={(id) => {
console.log('Right => ', id);
changeDataHandle(id)
}}
/>
</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
row: {
width: '100%',
height: 60,
backgroundColor: '#fff',
borderBottomWidth: 1,
borderBottomColor: '#ccc',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 20,
},
image: {
width: 32,
height: 32,
},
})

export default SwipeApp;

0 comments on commit c417d21

Please sign in to comment.