# react-native-swipeview-flat

> SwipeView component compatible with FlatList for React Native.

Latest version **1.0.1** (published 2018-01-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-swipeview-flat
pnpm add react-native-swipeview-flat
yarn add react-native-swipeview-flat
bun add react-native-swipeview-flat
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-01-12 |
| First published | 2018-01-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | rishabhbhatia, eugenehp |
| Maintainers | eugenehp |
| Keywords | react-native, swipeview, swipe-to-delete, iOS, android |

## Links

- npm: https://www.npmjs.com/package/react-native-swipeview-flat
- Repository: https://github.com/eugenehp/react-native-swipeview
- Homepage: https://github.com/eugenehp/react-native-swipeview#readme
- Issues: https://github.com/eugenehp/react-native-swipeview/issues
- npm.io page: https://npm.io/package/react-native-swipeview-flat

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-01-12
- 1.0.0 — 2018-01-12

## README

# React Native SwipeView Flat


## Getting Started

- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Properties](#properties)

### Installation
```bash
$ npm i react-native-swipeview-flat --save
```

### Basic Usage
```jsx
import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';

import SwipeView from 'react-native-swipeview';

export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <SwipeView
          scroll={scrolling => console.log(scrolling)}
          renderVisibleContent={() => <Text style={styles.text}>SwipeMe</Text>}
        />
      </View>
    );
  };
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    backgroundColor: 'whitesmoke',
    padding: 20,
  }
});

```
![alt text](http://res.cloudinary.com/rishabhbhatia/image/upload/c_scale,w_200/v1504599144/swipeview/swipeview-basic-v1.0.1.gif)

### Properties

#### Basic

| Prop  | Type | Description | Default|
| :------------ |:---------------:| :---------------:| :-----|
| leftOpenValue | `number` | TranslateX: How much view opens from the left when swiping left-to-right (positive number). | 0 |
| rightOpenValue | `number` | TranslateX: How much view opens from the right when swiping right-to-left (negative number). | 0 |
| swipeDuration | `number` | Duration of the slide out swipe animation. | 250 |
| swipeToOpenPercent | `number` | What % of the left/right openValue does the user need to swipe past to trigger onSwipedLeft/onSwipedRight actions. | 35 |
| disableSwipeToLeft | `bool` | Disable ability to swipe view to left. | false |
| disableSwipeToRight | `bool` | Disable ability to swipe view to right. | false |
| onSwipedLeft | `func` | Called when left swipe is completed. | - |
| onSwipedRight | `func` | Called when right swipe is completed. | - |
| previewSwipeDemo | `bool` | Should the view do a slide out preview to show that it is swipe-able. | false |
| previewDuration | `number` | Duration of the slide out preview animation. | 300 |
| previewOpenValue | `number` | TranslateX value for the slide out preview animation. | -60 |
| previewOpenDelay | `number` | Delay before starting preview animation. | 350 |
| previewCloseDelay | `number` | Delay before closing preview animation. | 300 |
| swipingLeft | `bool` | Should swiping initialize with right-to-left. This should be useful for swipe previews ex: +ve previewOpenValue `swipingLeft: false` & -ve previewOpenValue `swipingLeft: true`. | true |
| recalculateHiddenLayout | `bool` | Enable hidden row onLayout calculations to run always. | false |
| directionalDistanceChangeThreshold | `number` | Change the sensitivity of the row. | 2 |
| scroll | `func` | Called when swipe actions starts/ends

#### Views
| Prop  | Type | Description | Default|
| :------------ |:---------------:| :---------------:| :-----|
| renderVisibleContent | `func` | Main Content view. | - |
| renderLeftView | `func` | Left view to render behind the right view. | - |
| renderRightView | `func` | Right view to render behind the item view. | - |

## Contribution

- [@rishabhbhatia](mailto:rishabh.bhatia08@gmail.com) Author.

## Credits

Inspirations:
* react-native-swipe-list-view [(Github)](https://github.com/jemise111/react-native-swipe-list-view)
* react-native-todo [(GitHub)](https://github.com/rishabhbhatia/react-native-todo)
* react-native-swipeview [(GitHub)](https://github.com/rishabhbhatia/react-native-swipeview)

## Questions

Create an issue](https://github.com/eugenehp/react-native-swipeview/issues/new)

## License

Released under the [Mit License](https://opensource.org/licenses/MIT)

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