react-native-action-view

    1.3.0 • Public • Published

    React Native Action View

    react-native-action-view is an easy to use component that allows displaying swipeable buttons with a variety of transitions.

    Using

    Import the component:

    import { SwipeActionView } from 'react-native-action-view';

    Use the component:

    <SwipeActionView rightExpansionSettings={{buttonIndex: 0}}
                     leftExpansionSettings={{buttonIndex: 0}} 
                     rightButtons={[{title: 'Red', color: 'rgb(255, 0, 0)', callback: () => {alert('Red button tapped.');}}, 
                                    {title: 'Green', color: 'rgb(0, 255, 0)', callback: () => {alert('Green button tapped.');}},
                                    {title: 'Blue', color: 'rgb(0, 0, 255)', callback: () => {alert('Blue button tapped.');}}]}
                     leftButtons={[{title: 'Red', color: 'rgb(255, 0, 0)', callback: () => {alert('Red button tapped.');}}, 
                                    {title: 'Green', color: 'rgb(0, 255, 0)', callback: () => {alert('Green button tapped.');}},
                                    {title: 'Blue', color: 'rgb(0, 0, 255)', callback: () => {alert('Blue button tapped.');}}]}
                    >
      <Text style={styles.welcome}>
        Welcome to React Native!
      </Text>
      <Text style={styles.instructions}>
        To get started, swipe this view.
      </Text>
      <Text style={styles.instructions}>
        Tap on a button or swipe fully.
      </Text>
    </SwipeActionView>

    Configuration

    Possible props are:

    • leftButtons, rightButtons
      • title or image, color, callback
    • leftExpansionSettings, rightExpansionSettings - Control the button expansion settings
      • buttonIndex - The button to expand (Number)
      • fillOnTrigger - Whether to fill the button upon expansion (Boolean)
      • threshold - The treshold, in points, before expansion begins (Number)
    • leftSwipeSettings, rightSwipeSettings - Control swipe settings
      • transition - The transition type (String)
        • Available types: "static" (default), "border", "drag", "clipCenter", "rotate3d", "grow"
      • enableSwipeBounces - Controls if the swipe motion bounces or not (Boolean)

    Transitions Types

    Border

    Clip

    Rotate3D

    Static

    Drag

    Keywords

    none

    Install

    npm i react-native-action-view

    DownloadsWeekly Downloads

    130

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    291 kB

    Total Files

    63

    Last publish

    Collaborators

    • andy-wix
    • artald
    • guyca
    • leonatan
    • ofirdagan
    • wix.mobile
    • yogevbd