Swipeable

Provides both swipeable icon or text. Mostly used for ListItems.

Preview

Swipeable has two modes:

• Action on click

• Action on release

Code sample

Action on click - with icons

import { Swipeable } from '@dormakaba/digital-reactnative-visual';

<Swipeable
  rightButtons={[
    <Swipeable.Icon icon="icon-recyclebin" error onPress={() => {}} ></Swipeable.Icon>
  ]}
  leftButtons={[
    <Swipeable.Icon left icon="icon-admin" info onPress={() => {}} ></Swipeable.Icon>,
    <Swipeable.Icon left icon="icon-success" success onPress={() => {}} ></Swipeable.Icon>
  ]}
 >
  <List.Item onPress={() => {}} icon="icon-persons">
    <Text>With Buttons</Text>
  </List.Item>
</Swipeable>

Action on click - with text

import { Swipeable } from '@dormakaba/digital-reactnative-visual';

<Swipeable
  leftButtonWidth={100}
  rightButtonWidth={100}
  rightButtons={[
    <Swipeable.Text error onPress={() => {}} >Delete</Swipeable.Text>
  ]}
  leftButtons={[
    <Swipeable.Text left info onPress={() => {}} >Permanently closed</Swipeable.Text>,
    <Swipeable.Text left success onPress={() => {}} >Remote Open</Swipeable.Text>
  ]}
>
  <List.Item onPress={() => {}} icon="icon-persons">
    <Text>With Buttons</Text>
  </List.Item>
</Swipeable>

Action on release - with icon

import { Swipeable } from '@dormakaba/digital-reactnative-visual';

class WithIcon extends React.Component {

  state = {
    rightActionActivated: false,
    toggle: false
  };

  render() {
    const {rightActionActivated, toggle} = this.state;

    return (
      <Swipeable
        rightActionActivationDistance={100}
        rightContent={
          !rightActionActivated ?
            <Swipeable.Icon icon="icon-recyclebin" error onPress={action('clicked-button')} ></Swipeable.Icon> :
            <Swipeable.Icon icon="icon-success" success onPress={action('clicked-button')} ></Swipeable.Icon>
        }
        onRightActionActivate={() => this.setState({rightActionActivated: true})}
        onRightActionDeactivate={() => this.setState({rightActionActivated: false})}
        onRightActionComplete={() => this.setState({toggle: !toggle})}
      >
        <List.Item onPress={() => {}} icon="icon-persons">
          <Text>With Swipe action</Text>
        </List.Item>
      </Swipeable>
    );
  }
}

Action on release - with text

import { Swipeable } from '@dormakaba/digital-reactnative-visual';

class Example2 extends React.Component {

  state = {
    rightActionActivated: false,
    toggle: false
  };

  render() {
    const {rightActionActivated, toggle} = this.state;

    return (
      <Swipeable
        rightActionActivationDistance={100}
        rightContent={
          !rightActionActivated ?
            <Swipeable.Text error onPress={action('clicked-button')} >Delete</Swipeable.Text> :
            <Swipeable.Text success onPress={action('clicked-button')} >Delete on Release</Swipeable.Text>
        }
        onRightActionActivate={() => this.setState({rightActionActivated: true})}
        onRightActionDeactivate={() => this.setState({rightActionActivated: false})}
        onRightActionComplete={() => this.setState({toggle: !toggle})}
      >
        <List.Item onPress={() => {}} icon="icon-persons">
          <Text>With Swipe action</Text>
        </List.Item>
      </Swipeable>
    );
  }
}

Props

Swipeable

prop	type	description
leftContent	renderable	(optional) left content visible during pull action
rightContent	renderable	(optional) right content visible during pull action
leftButtons	renderable[]	(optional) array of buttons, first being the innermost; ignored if leftContent present
rightButtons	renderable[]	(optional) array of buttons, first being the innermost; ignored if rightContent present
leftActionActivationDistance	integer	(optional) minimum swipe distance to activate left action
onLeftActionRelease	function	(optional) user has swiped beyond leftActionActivationDistance and released
rightActionActivationDistance	integer	(optional) minimum swipe distance to activate right action
onRightActionRelease	function	(optional) user has swiped beyond rightActionActivationDistance and released
leftButtonWidth	integer	(optional) resting visible peek of each left button after buttons are swiped open
rightButtonWidth	integer	(optional) resting visible peek of each right button after buttons are swiped open
onRef	function	(optional) receive swipeable component instance reference
onPanAnimatedValueRef	function	(optional) receive swipeable pan Animated.ValueXY reference for upstream animations

Swipeable.Icon

Name	Type	Description
icon	string	name of icon to show
*		set color with any of info, warning, error, success
onPress	function	action to trigger on press
left	boolean	used in leftButtons or leftContent

Swipeable.Text

Name	Type	Description
children	string	text to show
*		set color with any of info, warning, error, success
onPress	function	action to trigger on press
left	boolean	used in leftButtons or leftContent