# Swipeable

## Preview

![](https://3422846761-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGP0U4aBj2zuNdsU1Qu%2F-LH2_4pUvWAgWvYauo_x%2F-LH2_TwKXwVTd9bbx5Y8%2Fswipeable.gif?alt=media\&token=7049ffcf-98a3-4a41-8c47-c88b63dc7252)

Swipeable has two modes:

* Action on click
* Action on release

## Code sample

### Action on click - with icons

```jsx
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

```jsx
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

```jsx
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

```jsx
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                          |