Package Exports
- react-native-swipe-row-fork-expo
- react-native-swipe-row-fork-expo/lib/commonjs/index.js
- react-native-swipe-row-fork-expo/lib/module/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-swipe-row-fork-expo) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@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 |