1.0.2 • Published 5 years ago

rn-inifinitscroll-load v1.0.2

Weekly downloads
1
License
ISC
Repository
github
Last release
5 years ago

rn-inifinitScroll-load

BUILD SETUP

## Installation
Version 1.0.2

npm install rn-inifinitScroll-load --save

USAGE

import InfiniteScroll from rn-inifinitScroll-load

class App extends Component {
    state={
        active:0,
          itemRender: 9,
    increase: 5,
     data: [
      {
        userId: 1,
        id: 1,
        title: 'delectus aut autem',
        completed: false,
      },
      {
        userId: 1,
        id: 2,
        title: 'quis ut nam facilis et officia qui',
        completed: false,
      },
      {
        userId: 1,
        id: 3,
        title: 'fugiat veniam minus',
        completed: false,
      },
      {
        userId: 1,
        id: 4,
        title: 'et porro tempora',
        completed: true,
      },
      {
        userId: 1,
        id: 5,
        title:
          'laboriosam mollitia et enim quasi adipisci quia provident illum',
        completed: false,
      },
      {
        userId: 1,
        id: 6,
        title: 'qui ullam ratione quibusdam voluptatem quia omnis',
        completed: false,
      },
      {
        userId: 1,
        id: 7,
        title: 'illo expedita consequatur quia in',
        completed: false,
      },
      {
        userId: 1,
        id: 8,
        title: 'quo adipisci enim quam ut ab',
        completed: true,
      },
      {
        userId: 1,
        id: 9,
        title: 'molestiae perspiciatis ipsa',
        completed: false,
      },
      {
        userId: 1,
        id: 10,
        title: 'illo est ratione doloremque quia maiores aut',
        completed: true,
      },
      {
        userId: 1,
        id: 11,
        title: 'vero rerum temporibus dolor',
        completed: true,
      },
      {
        userId: 1,
        id: 12,
        title: 'ipsa repellendus fugit nisi',
        completed: true,
      },
      {
        userId: 1,
        id: 13,
        title: 'et doloremque nulla',
        completed: false,
      },
      {
        userId: 1,
        id: 14,
        title: 'repellendus sunt dolores architecto voluptatum',
        completed: true,
      },
      {
        userId: 1,
        id: 15,
        title: 'ab voluptatum amet voluptas',
        completed: true,
      },
      {
        userId: 1,
        id: 16,
        title: 'accusamus eos facilis sint et aut voluptatem',
        completed: true,
      },
      {
        userId: 1,
        id: 17,
        title: 'quo laboriosam deleniti aut qui',
        completed: true,
      },
      {
        userId: 1,
        id: 18,
        title: 'dolorum est consequatur ea mollitia in culpa',
        completed: false,
      },
      {
        userId: 1,
        id: 19,
        title: 'molestiae ipsa aut voluptatibus pariatur dolor nihil',
        completed: true,
      },
    }
booleanFunc = () => {
    this.setState({
      itemRender: this.state.itemRender + this.state.increase,

    });
  };
  renderItem = ({item, index}) => {
    if (index + 1 <= this.state.itemRender) {
      // console.log(item.views)

      return (
        <View>
          <Text>{item.userId}</Text>
          <Text>{item.title}</Text>
          <Text>{item.completed}</Text>
        </View>
      );
    }
  };
    render(){
       <View>
          <InfiniteScroll
            renderItem={this.renderItem}
            booleanFunc={this.booleanFunc}
            data={this.state.data}
            limit={this.state.itemRender}
            newIncrease={this.state.increase}
          />

        </View>


        )
    }
}

Current API(Property)

PropertyTypeDescription
renderItemcomponentrender component
booleanFuncPropTypes.functionupdate state item
dataPropTypes.Array of Objctitem that will be rendering
limitPropTypes.numberamount of item will display first
newIncreasePropTypes.numberamount of item that increase

Project Documentation

  • Author Account
Arwy Syahputra Siregar
github.com/arwysyah