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.

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>
    );
  }
}