0.1.1 • Published 3 years ago
@nghinv/react-native-swipe-row v0.1.1
@nghinv/react-native-swipe-row
React Native Swipe Row Component use reanimated library
Installation
yarn add @nghinv/react-native-swipe-row
or
npm install @nghinv/react-native-swipe-row
- peerDependencies
yarn add react-native-gesture-handler react-native-reanimated
Usage
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SwipeRow from '@nghinv/react-native-swipe-row';
function App() {
return (
<View style={styles.container}>
<SwipeRow
left={[
{ title: 'Delete', backgroundColor: 'tomato' },
{ title: 'Edit', icon: { name: 'delete' } },
]}
right={[
{
title: 'Edit',
titleColor: 'blue',
backgroundColor: '#b388ff',
icon: { name: 'edit' },
},
{
title: 'Delete',
backgroundColor: 'tomato',
icon: { name: 'delete' },
},
]}
style={{ marginVertical: 1 }}
>
<View style={styles.row}>
<Text>Swipe Row</Text>
</View>
</SwipeRow>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingVertical: 24,
},
row: {
height: 44,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'steelblue',
}
});
export default App;
Property
Property | Type | Default | Description |
---|---|---|---|
left | Array<ActionType> | undefined | |
right | Array<ActionType> | undefined | |
children | React.ReactNode | undefined | |
style | ViewStyle | undefined | |
buttonWidth | number | 75 | |
autoClose | boolean | true | |
onPress | () => void | undefined | |
onSwipe | (value: number) => void | undefined | |
activeRow | Animated.SharedValue<number> | undefined | |
rowIndex | number | -1 | |
disabled | boolean | false |
- ActionType
Property | Type | Default | Description |
---|---|---|---|
icon | IconPropsType | undefined | |
title | string | undefined | |
titleColor | string | undefined | |
titleStyle | TextStyle | undefined | |
onPress | () => void | undefined | |
backgroundColor | string | undefined |