Neatly Punctuated Musings

    react-native-smart-flatlist

    1.0.4 • Public • Published

    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
    

    Install

    npm i react-native-smart-flatlist

    DownloadsWeekly Downloads

    5

    Version

    1.0.4

    License

    none

    Unpacked Size

    17.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • nghinv