rn-simple-swipe v1.11.0

rn-simple-swipe

Easy to use swipeable component for React Native built on top of react-native-gesture-handler/Swipeable, support both iOS and Android.

Installation

1. First install react-native-gesture-handler

2. Add rn-simple-swipe to your project:

npm i --save react-native-swipeable

or

yarn add rn-simple-swipe

Usage

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>
    )
}

Props

RightActionsProps

   {
	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,
   }

LeftActionProps

   {
    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,
   }

Example

To run the example

npm run build
cd example
npm install
react-native run-ios # or run-android