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

prop	type	default	description
rightActions	Array [RightActionsProps]	[]	Right swipe action buttons props
leftAction	Object {LeftActionProps}	{}	Left swipe button props

RightActionsProps

prop	type	default	required	description
label	String	''	true	Text label for the action button
color	String	transparent	false	Action button background color
width	Number	75	false	Action button width
style	Object	{}	false	Additional action button style
onPress	Fun	undefined	false	On action button press callback
children	Element	undefined	false	Custom action button children (you can render icon here for instance)
labelColor	String	#fff	false	Label text color
labelStyle	Object	{}	false	Label text style

   {
	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

prop	type	default	required	description
label	String	''	true	Text label for the action button
color	String	transparent	false	Button background color
icon	Element	undefined	false	Icon that will be render before label
style	Object	{}	false	Additional button style
onPress	Fun	undefined	false	On button press callback
children	Element	undefined	false	Custom children
labelColor	String	#fff	false	Label text color
labelStyle	Object	{}	false	Label text style

   {
    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