Skip to content

arwysyah/rn-inifinitScroll-load

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

rn-inifinitScroll-load

Node.js



Arwy Syahputra Siregar's DEV Profile
https://www.npmjs.com/package/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>


        )
    }
}

Girl in a jacket

Current API(Property)

Property Type Description
renderItem component render component
booleanFunc PropTypes.function update state item
data PropTypes.Array of Objct item that will be rendering
limit PropTypes.number amount of item will display first
newIncrease PropTypes.number amount of item that increase

Project Documentation

  • Author Account
Arwy Syahputra Siregar
github.com/arwysyah

Copyright ©

by Arwy Syahputra Siregar

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published