react-native-smart-flatlist

Getting started

$ npm install react-native-smart-flatlist --save

Mostly automatic installation

$ react-native link react-native-interactable

Use

import React, { PureComponent } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
} from 'react-native';
import { SmartFlatlist } from 'react-native-smart-flatlist'

const DATA = [
  { title: 'Count 1' },
  { title: 'Count 2' },
  { title: 'Count 3' },
  { title: 'Count 4' },
  { title: 'Count 5' },
  { title: 'Count 6' },
  { title: 'Count 7' },
  { title: 'Count 8' },
  { title: 'Count 9' },
  { title: 'Count 10' }
]

class Example extends PureComponent {
  state = {
    data: [],
    refreshing: false,
    loadMore: false
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        data: DATA
      })
    }, 1000)
  }

  renderLeft = () => {
    return (
      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <Image style={{ width: 36, height: 36 }} source={require('../assets/icon-check.png')} />
        <Text style={{ color: 'white', fontSize: 17, fontWeight: '500' }}>Check</Text>
      </View>
    )
  }

  renderRight = () => {
    return (
      <Image style={{ width: 40, height: 40 }} source={require('../assets/icon-trash.png')} />
    )
  }

  renderRight2 = () => {
    return (
      <Image style={{ width: 40, height: 40 }} source={require('../assets/icon-clock.png')} />
    )
  }

  renderRow = (item) => {
    return (
      <View style={{ height: 75, backgroundColor: '#eeeeee', alignItems: 'center', flexDirection: 'row' }}>
        <View style={{ width: 50, height: 50, borderRadius: 25, backgroundColor: '#73d4e3', margin: 20 }} />
        <View>
          <Text style={{fontWeight: 'bold', fontSize: 20}}>{item.title}</Text>
          <Text style={{fontSize: 18, color: 'gray'}}>Drag the row left and righ</Text>
        </View>
      </View>
    )
  }

  render() {
    const leftButton = [
      {
        component: this.renderLeft,
        onPress: () => console.log('SmartSwipeRow'),
        backgroundColor: '#2f9a5d'
      },
      {
        component: this.renderRight,
        onPress: () => console.log('SmartSwipeRow'),
        backgroundColor: 'violet'
      },
    ]

    const rightButton = [
      {
        component: this.renderRight,
        onPress: () => console.log('SmartSwipeRow'),
        backgroundColor: 'red'
      },
      {
        component: this.renderRight2,
        onPress: () => console.log('SmartSwipeRow'),
        backgroundColor: 'green'
      },
    ]

    return (
      <View style={{ flex: 1, backgroundColor: 'white' }}>
        <SmartFlatlist
          data={this.state.data}
          left={leftButton}
          right={rightButton}
          heightRow={75}
          renderRow={this.renderRow}
          heightRow={100}
          renderSeparator={() => <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: 'grey' }} />}
          onLoadMore={this._onLoadMore}
          onRefresh={() => {
            this.setState({ refreshing: true })
            setTimeout(() => {
              this.setState({
                data: DATA,
                refreshing: false
              })
            }, 2000)
          }}
          refreshing={this.state.refreshing}
        />
      </View>
    );
  }

  _onLoadMore = () => {
    if (this.state.loadMore) {
      return
    }

    this.setState({
      loadMore: true
    })
    setTimeout(() => {
      this.setState({
        data: this.state.data.concat(DATA),
        loadMore: false
      })
    }, 500)
  }
}

export default Example