CODEWITHSUNDEEP
jsonreact-nativepaginationjsx
Anu
Anu

Reputation: 1742

How to do pagination in react native?

i am looking for a nice document explaining well about pagination in react native.I can't find a one i'm looking for.I'm fetching the data from server (set of 15 questions and answers).I want to display single question in a page with a next or previous button at the bottom.How to do this?Now i'm displaying all the 15 questions in a single page with ScrollView. But i want pagination.Please help me.

Upvotes: 0

Views: 2487

Answers (2)

Keshav Gera
Keshav Gera

Reputation: 11244

var start=0;  // above class 

var end=100;


fetchData = () => {
        var mydata = realm.objects('Product_Info');
        this.setState({dbData: mydata})

        console.log("fetch----------    paggingData.start-->  " +    start);
        console.log("fetch----------    paggingData.end-->  " +    end);

        var newData = mydata.filtered('prodId > $0 AND prodId <= $1' , start, end);         // TODO Logic fetch Data

        let paggingData =[];
        paggingData = JSON.parse(JSON.stringify(this.state.paggingData));


        Object.keys(newData).map(key => {
            paggingData.push(newData[key])
        })

        this.setState({
            paggingData
        }, () => {
            console.log('Search-------------------------------PAGGGING  DATA \n', this.state.paggingData)

        })

        this.setState({dataProvider: dataProvider.cloneWithRows(paggingData)})          //TODO ... working in RecyclerView both

    }
    onScroll = () => {
        console.log("Scrolling");
    }

    onEndReached = () => {
        console.log("\n\n\n\n\--------------------------------------------Reached to End---------------------------------------------");

        start = end;
        end = end+100;

        this.fetchData()
    }


  <RecyclerListView
      layoutProvider={this.layoutProvider}
      dataProvider={this.state.dataProvider}
      rowRenderer={this.rowRenderer}
      onEndReached={this.onEndReached}
      onScroll={this.onScroll}
    />

Upvotes: 0

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

The library react-native-swiper would be the best to use in such a scenario.The example is mentioned in the following link here.

This library uses ScrollView , with a snap animation effect for each item and also contains the customized next and previous button as mentioned here.

Upvotes: 1

Related Questions