Code Monkey home page Code Monkey logo

rn-simple-swipe's Introduction

rn-simple-swipe npm version

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

rn-simple-swipe's People

Contributors

disko998 avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

rn-simple-swipe's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.