# @nghinv/react-native-swipe-row

> React Native Swipe Row Library

Latest version **0.1.1** (published 2021-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nghinv/react-native-swipe-row
pnpm add @nghinv/react-native-swipe-row
yarn add @nghinv/react-native-swipe-row
bun add @nghinv/react-native-swipe-row
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-09-24 |
| First published | 2021-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 98.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | NghiNV |
| Maintainers | nghinv |
| Keywords | react-native, ios, android, swipe, row |

## Links

- npm: https://www.npmjs.com/package/@nghinv/react-native-swipe-row
- Repository: https://github.com/nghinv-software/react-native-swipe-row
- Homepage: https://github.com/nghinv-software/react-native-swipe-row#readme
- Issues: https://github.com/nghinv-software/react-native-swipe-row/issues
- npm.io page: https://npm.io/package/@nghinv/react-native-swipe-row

## Dependencies (2)

- [react-fast-compare](https://npm.io/package/react-fast-compare.md) *
- [@nghinv/react-native-icons](https://npm.io/package/@nghinv/react-native-icons.md) >=1.0.6

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.1.1 (latest) — 2021-09-24
- 0.0.1 (undefined) — 2021-07-07
- 0.1.0 — 2021-08-09
- 0.0.4 — 2021-08-09
- 0.0.3 — 2021-08-09
- 0.0.2 — 2021-07-31

## README

# @nghinv/react-native-swipe-row

React Native Swipe Row Component use reanimated library

---

[![CircleCI](https://circleci.com/gh/nghinv-software/react-native-swipe-row.svg?style=svg)](https://circleci.com/gh/nghinv-software/react-native-swipe-row)
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]
[![All Contributors][all-contributors-badge]][all-contributors]
[![PRs Welcome][prs-welcome-badge]][prs-welcome]

<p align="center">
<img src="./assets/demo.gif" width="300"/>
</p>

## Installation

```sh
yarn add @nghinv/react-native-swipe-row
```

or 

```sh
npm install @nghinv/react-native-swipe-row
```

- peerDependencies

```sh
yarn add react-native-gesture-handler react-native-reanimated
```

## Usage

```js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SwipeRow from '@nghinv/react-native-swipe-row';

function App() {
  return (
    <View style={styles.container}>
      <SwipeRow
        left={[
          { title: 'Delete', backgroundColor: 'tomato' },
          { title: 'Edit', icon: { name: 'delete' } },
        ]}
        right={[
          {
            title: 'Edit',
            titleColor: 'blue',
            backgroundColor: '#b388ff',
            icon: { name: 'edit' },
          },
          {
            title: 'Delete',
            backgroundColor: 'tomato',
            icon: { name: 'delete' },
          },
        ]}
        style={{ marginVertical: 1 }}
      >
        <View style={styles.row}>
          <Text>Swipe Row</Text>
        </View>
      </SwipeRow>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 24,
  },
  row: {
    height: 44,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'steelblue',
  }
});

export default App;
```

# Property

| Property | Type | Default | Description |
|----------|:----:|:-------:|-------------|
| left | `Array<ActionType>` | `undefined` |  |
| right | `Array<ActionType>` | `undefined` |  |
| children | `React.ReactNode` | `undefined` |  |
| style | `ViewStyle` | `undefined` |  |
| buttonWidth | `number` | `75` |  |
| autoClose | `boolean` | `true` |  |
| onPress | `() => void` | `undefined` |  |
| onSwipe | `(value: number) => void` | `undefined` |  |
| activeRow | `Animated.SharedValue<number>` | `undefined` |  |
| rowIndex | `number` | `-1` |  |
| disabled | `boolean` | `false` |  |


- **ActionType**

| Property | Type | Default | Description |
|----------|:----:|:-------:|-------------|
| icon | `IconPropsType` | `undefined` |  |
| title | `string` | `undefined` |  |
| titleColor | `string` | `undefined` |  |
| titleStyle | `TextStyle` | `undefined` |  |
| onPress | `() => void` | `undefined` |  |
| backgroundColor | `string` | `undefined` |  |

---
## Credits

- [@Nghi-NV](https://github.com/Nghi-NV)

[version-badge]: https://img.shields.io/npm/v/@nghinv/react-native-swipe-row.svg?style=flat-square
[package]: https://www.npmjs.com/package/@nghinv/react-native-swipe-row
[license-badge]: https://img.shields.io/npm/l/@nghinv/react-native-swipe-row.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[all-contributors-badge]: https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square
[all-contributors]: #contributors
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: http://makeapullrequest.com

---
_Source: https://npm.io/package/@nghinv/react-native-swipe-row · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._