react-native-swipeable-list-view

!Supports Android, iOS
!npm

Example:

!android !android

Installation

In order to use this package, you will also need to install react-native-gesture-handler to your project.

Using npm:

``sh
npm i --save react-native-swipeable-list-view react-native-gesture-handler
`
or using yarn:

`sh
yarn add react-native-swipeable-list-view react-native-gesture-handler
`

Usage:

`js

import React from 'react';
import {
StyleSheet,
Text,
SafeAreaView,
TouchableOpacity,
Image,
Alert,
View
} from 'react-native';

import Swipelist from 'react-native-swipeable-list-view';

const data = [
{
name: 'Javascript',
},
{
name: 'React Native',
},
{
name: 'Swift',
},
];

const App = () => {
return (

data={data}
renderRightItem={(data, index) => (


{index + 1}. {data.name}


)}
renderHiddenItem={(data, index) => (

style={[styles.rightAction, { backgroundColor: '#bfbfbf' }]}
onPress={() => {
Alert.alert('Edit?', data.name);
}}
>
source={require('./pen.png')}
style={{ width: 25, height: 25 }}
/>

style={[styles.rightAction, { backgroundColor: 'red' }]}
onPress={() => {
Alert.alert('Delete?', data.name);
}}
>
source={require('./tash.png')}
style={{ width: 25, height: 25 }}
/>


)}
rightOpenValue={200}
/>

);
};

const styles = StyleSheet.create({
container: {
height: 60,
marginVertical: 10,
backgroundColor: '#ffffff',
justifyContent: 'center',
paddingLeft: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},

rightAction: {
width: '100%',
marginVertical: 10,
alignItems: 'center',
flex: 1,
justifyContent: 'center',
height: 60,
backgroundColor: '#ffffff',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
});

export default App;

``

Properties

Prop | Default | Type | Description
| :------------- |:---------------:| :---------------:| :-----|
data | - | array | objects to be passed into the renderItem and renderHiddenItem functions (is Required). |
renderRightItem | - | function | How to render a row. Should return a valid React Element (is Required). |
renderHiddenItem | - | function | How to render a hidden row in a List (renders behind the row). Should return a valid React Element (is Required). |
rightOpenValue | 200 | number | TranslateX value for opening the row to the right (positive number) (is Required). |
onSwipelistOpen | - | function | Called when row gets open. |
onSwipelistClose | - | function | Called when row is closed. |
overshootRight | false | boolean | a boolean value indicating if the swipeable row can be pulled further than the right actions row width. |
friction | 1 | number | a number that specifies how much the visual interaction will be delayed compared to the gesture distance. e.g. value of 1 will indicate that the swipeable panel should exactly follow the gesture, 2 means it is going to be two times "slower". |