react-native-swipable-list-row/README.md

A simple and efficient react native swipable list row

# react-native-swipable-list-row

## NOTICE

### This one is deprecated!!! Don't USE IT!!!

As npmjs.org not allowed to unpublish the repo (which I didn't know before), and I didn't know that wix had a pretty awesome one, so this one is not going to be maintained anymore. SORRY.

You can check the same one in wix/react-native-interactable.

### Introduction

A simple and efficient react native swipable list row implementation.

To make a swipable list row, we had two challenges:

- The back/hidden row layout should keep up with front/visible row.
- The listView scroll should be disabled while pull the row.

By using ```Animated.View```, and ```Animated.event``` to hack the onLayout event, it provide more efficient way to update layout, as they all happened in native side, no re-render required.

By using ```setNativeProps``` from list view, it will be able to do the second one.

Just notice, ```setNativeProps``` is supported in ```FlatList``` from RN >= 0.47only. 

The code is inspired by Tal Kol speech at React Conf 2017.

https://www.youtube.com/watch?v=mjsv8NJnt5k

### Usage

You can do installation:

```
npm install -S react-native-swipable-list-row
```

Or just copy to use it in your project, more better.

```jsx
import React, { Component } from 'react';

import {
  View,
  Text,
  ScrollView,
  Dimensions,
  TouchableHighlight,
  FlatList,
} from 'react-native';

import SwipableRowView from './SwipableRowView';


const window = Dimensions.get('window');

export default class ExampleView extends Component {

  constructor(props) {
    super(props);

    this.state = {
      value: 'Hello row',
    };

    this.data = [];
    for (let i = 0; i < 50; i += 1) {
      this.data.push({
        title: 'Row#' + i,
        id: i,
      });
    }
    this.update = 0;
    this.panResponder = null;
    this.rowView = null;
    this.scrollView = null;
  }

  keyExtractor = item => item.id

  renderVisibleRow = (item, closeRow) => (
    <TouchableHighlight
      style={{ flex: 1, marginBottom: 1, backgroundColor: '#F7F7F7' }}
      underlayColor={'#CCC'}
      activeOpacity={0.9}
      onPress={() => {
        item.title = 'Hello, this is a pretty long text to test the layout change in front row, so I will put something more here, blah, blah, blah...... ';
        
        // I send closeRow from SwipableRowView here
        // to test touch to close the row
        // you can do your way
        
        closeRow();
        this.update += 1;
        this.forceUpdate();
      }}
    >
      <View style={{
        justifyContent: 'center',
        alignItems: 'flex-start',
        // opacity: 0.3,
        backgroundColor: '#F7F7F7',
        paddingVertical: 20,
      }}
      >
        <Text style={{ color: 'black' }} >
          {item.title}
        </Text>
      </View>
    </TouchableHighlight>
  );

  renderHiddenRow = () => {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        backgroundColor: '#bedaf7',
        // paddingVertical: 20,
        marginBottom: 1,
      }}
      >
        <Button>
          Delete
        </Button>
      </View>
    );
  }

  renderRow = (rowData) => {
    const item = rowData.item;

    return (
      <SwipableRowView
        ref={(ref) => {
          this.rowView = ref;
        }}
        renderVisibleRow={(close) => this.renderVisibleRow(item, close)}
        renderHiddenRow={this.renderHiddenRow}
        rightOffset={-100}
        listView={this.scrollView}
      />
    );
  }

  render() {
    return (
      <View style={{ flex: 1, paddingTop: 55, paddingBottom: 50 }} >
        <FlatList
          ref={(ref) => {
            this.scrollView = ref;
          }}
          style={{ flex: 1, backgroundColor: '#DDD' }}
          initialNumToRender={10}
          data={this.data}
          renderItem={this.renderRow}
          keyExtractor={this.keyExtractor}
          // extraData={this.update}
          windowSize={11}
          // scrollEnabled={false}
        />

      </View>
    );
  }
}
```