Load More – Pagination trick with react native

By Mr. Rahul March 15, 2022 React Native 0 Comments

Pagination is needed when records in hundreds, thousands and in millions. So today we try to find the solution for how to create pagination with load-more buttons in react native. In mobile apps generally we use a load more button so let’s start. For frontend we will use react native and backend you can choose according to your requirements like node js, PHP etc.

Highlights
1. Create load more button in component
2. create function for append load more records

1. Create load more button in component

{data && data.length<total?(
 <TouchableHighlight style={styles.btnGradientDiv} 
  underlayColor="#ffffff" 
  onPress = {() => {loadmore()}}>
 <LinearGradient
      start={{x: 0, y: 0}} end={{x: 1, y: 0}}
      colors={['#9b0000', '#720101']}
      style={[styles.btnDefault, styles.btnFull]}>
      <Text style={styles.TextStyle}>Load More</Text>
      </LinearGradient>
  </TouchableHighlight>):(<></>)}

{data && data.length<total?(

<TouchableHighlight style={styles.btnGradientDiv}

underlayColor="#ffffff"

onPress = {() => {loadmore()}}>

<LinearGradient

start={{x: 0, y: 0}} end={{x: 1, y: 0}}

colors={['#9b0000', '#720101']}

style={[styles.btnDefault, styles.btnFull]}>

</LinearGradient>

</TouchableHighlight>):(<></>)}

2. Create function for append load more records

 // Get Items.
const loadmore = async (id) => { 

    let sdata = {
          method: 'POST',
          //credentials: 'same-origin',
          //mode: 'same-origin',
          body: JSON.stringify({
              "id":id,
              "page": count                  
          }),
          headers: {
            'Accept':       'application/json',
            'Content-Type': 'application/json',
            //'X-CSRFToken':  cookie.load('csrftoken')
          }
    }
    await fetch(BASE_URL+'/fetch_transactions',sdata)
    .then((response) => response.json())
    .then(async (json) => {
      if(json.status && json.data && json.data.length>0) {

        let new_Data = data.concat(json.data)

        setData(new_Data)
        setCount(prevCount => prevCount + 1)  
        
      } else if(!json.status) alert(json.msg)


    }) 

}

// Get Items.

const loadmore = async (id) => {

let sdata = {

method: 'POST',

//credentials: 'same-origin',

//mode: 'same-origin',

body: JSON.stringify({

"id":id,

"page": count

}),

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json',

//'X-CSRFToken': cookie.load('csrftoken')

}

await fetch(BASE_URL+'/fetch_transactions',sdata)

.then((response) => response.json())

.then(async (json) => {

if(json.status && json.data && json.data.length>0) {

let new_Data = data.concat(json.data)

setData(new_Data)

setCount(prevCount => prevCount + 1)

} else if(!json.status) alert(json.msg)

})

}

Full Code:

 import React, { useState } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  Button,
  TouchableOpacity,
  TouchableHighlight
} from 'react-native';
import { NativeRouter, Route, Link } from "react-router-native";
import LinearGradient from 'react-native-linear-gradient';
var BASE_URL = 'http://localhost:8081/api'

const My_pagination = (props) => {
  const [data, setData] = React.useState({});
  const [count, setCount] = React.useState(2);
  const [total, setTotal] = React.useState(0);

 React.useEffect(() => { 
    let isMounted = true;               // note mutable flag
   
    if (isMounted) {
      let sdata = {
                    method: 'POST',
                    //credentials: 'same-origin',
                    //mode: 'same-origin',
                    body: JSON.stringify({
                        "shipperId":id                   
                    }),
                    headers: {
                      'Accept':       'application/json',
                      'Content-Type': 'application/json',
                      //'X-CSRFToken':  cookie.load('csrftoken')
                    }
              }
              await fetch(BASE_URL+'/fetch_transactions',sdata)
              .then((response) => response.json())
              .then(async (json) => {
                if(json.status && json.data && json.data.length>0) {
                  setData(json.data)
                  setTotal(json.total)                    
                } else if(!json.status) alert(json.msg)

              }) 

    }
  return () => { isMounted = false }; // cleanup toggles value, if unmounted

}, []) 

// Get Items.
const loadmore = async (id) => { 

    let sdata = {
          method: 'POST',
          //credentials: 'same-origin',
          //mode: 'same-origin',
          body: JSON.stringify({
              "id":id,
              "page": count                  
          }),
          headers: {
            'Accept':       'application/json',
            'Content-Type': 'application/json',
            //'X-CSRFToken':  cookie.load('csrftoken')
          }
    }
    await fetch(BASE_URL+'/fetch_transactions',sdata)
    .then((response) => response.json())
    .then(async (json) => {
      if(json.status && json.data && json.data.length>0) {

        let new_Data = data.concat(json.data)

        setData(new_Data)
        setCount(prevCount => prevCount + 1)  
        
      } else if(!json.status) alert(json.msg)


    }) 

}


return (
  <View style={{flex:1, backgroundColor: '#ffffff'}}>
    <View style={styles.transacList}>


       {data && data.length>0?data.map((val,key) => {

        return (<View style={styles.transacItem} key={key}>
          <View style={[styles.transacCol, styles.transacColFirst]}>
            <Text style={[styles.transacTtl, styles.textSmall, styles.textBold,{ textTransform: 'uppercase'}]}>#{val._id}</Text>

         </View>

        </View>)}):(<Text style={styles.noDataText}>No Data found!!</Text>)}
    </View>              


      {data && data.length<total?(
       <TouchableHighlight style={styles.btnGradientDiv} 
        underlayColor="#ffffff" 
        onPress = {() => {loadmore()}}>
       <LinearGradient
            start={{x: 0, y: 0}} end={{x: 1, y: 0}}
            colors={['#9b0000', '#720101']}
            style={[styles.btnDefault, styles.btnFull]}>
            <Text style={styles.TextStyle}>Load More</Text>
            </LinearGradient>
        </TouchableHighlight>):(<></>)}

        </View>
              
           );

const styles = StyleSheet.create({
  
  btnDefault: {
    flexDirection: 'row',
    justifyContent: "center",
    alignItems: 'center',
    backgroundColor: '#680001',
    borderColor: '#680001',
    borderRadius: 8,
    paddingVertical: 12,
    paddingHorizontal: 40,
    position: 'relative',
    minWidth: 280,
  },
  btnFull: {
    minWidth: '100%',
  },
  TextStyle: {
    fontSize: 16,
    color: "#ffffff",
    fontFamily: 'Montserrat-SemiBold',
  },
  textRight: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  whtTextColor: {
    fontSize: 14,
    color: "#ffffff",
    fontFamily: 'Montserrat-Regular'
  },
  whtTextBoldColor: {
    fontSize: 14,
    color: "#ffffff",
    fontFamily: 'Montserrat-Bold'
  },
  transacList: {
    marginTop: -16,
  },
  transacItem: {
    paddingHorizontal: 16,
    paddingVertical: 16,
    backgroundColor: '#ffffff',
    borderRadius: 8,
    shadowColor: "rgba(0,0,0,0.5)",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 8,
    elevation: 5,
    flexDirection: 'row',
    justifyContent: "space-between",
    //alignItems: 'center',
    marginTop: 16,
  },
  transacColFirst: {
    flex: 0.7,
  },
  transacColSecond: {
    flex: 0.3,
    alignItems: 'flex-end',
  },
  transacTtl: {
    marginBottom: 4,
  },
  transacDate: {
    marginBottom: 4,
  },
  textBig: {
    fontSize: 16,
    color: '#000000',
    fontFamily: 'Montserrat-Regular',
  },
  
});


}

 export default My_pagination

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

import React, { useState } from 'react';

import {

SafeAreaView,

ScrollView,

StyleSheet,

Text,

Button,

TouchableOpacity,

TouchableHighlight

} from 'react-native';

import { NativeRouter, Route, Link } from "react-router-native";

import LinearGradient from 'react-native-linear-gradient';

var BASE_URL = 'http://localhost:8081/api'

const My_pagination = (props) => {

const [data, setData] = React.useState({});

const [count, setCount] = React.useState(2);

const [total, setTotal] = React.useState(0);

React.useEffect(() => {

let isMounted = true; // note mutable flag

if (isMounted) {

let sdata = {

method: 'POST',

//credentials: 'same-origin',

//mode: 'same-origin',

body: JSON.stringify({

"shipperId":id

}),

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json',

//'X-CSRFToken': cookie.load('csrftoken')

}

await fetch(BASE_URL+'/fetch_transactions',sdata)

.then((response) => response.json())

.then(async (json) => {

if(json.status && json.data && json.data.length>0) {

setData(json.data)

setTotal(json.total)

} else if(!json.status) alert(json.msg)

})

}

return () => { isMounted = false }; // cleanup toggles value, if unmounted

}, [])

// Get Items.

const loadmore = async (id) => {

let sdata = {

method: 'POST',

//credentials: 'same-origin',

//mode: 'same-origin',

body: JSON.stringify({

"id":id,

"page": count

}),

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json',

//'X-CSRFToken': cookie.load('csrftoken')

}

await fetch(BASE_URL+'/fetch_transactions',sdata)

.then((response) => response.json())

.then(async (json) => {

if(json.status && json.data && json.data.length>0) {

let new_Data = data.concat(json.data)

setData(new_Data)

setCount(prevCount => prevCount + 1)

} else if(!json.status) alert(json.msg)

})

}

return (

{data && data.length>0?data.map((val,key) => {

return (<View style={styles.transacItem} key={key}>

</View>

</View>)}):(<Text style={styles.noDataText}>No Data found!!</Text>)}

</View>

{data && data.length<total?(

<TouchableHighlight style={styles.btnGradientDiv}

underlayColor="#ffffff"

onPress = {() => {loadmore()}}>

<LinearGradient

start={{x: 0, y: 0}} end={{x: 1, y: 0}}

colors={['#9b0000', '#720101']}

style={[styles.btnDefault, styles.btnFull]}>

</LinearGradient>

</TouchableHighlight>):(<></>)}

</View>

);

const styles = StyleSheet.create({

btnDefault: {

flexDirection: 'row',

justifyContent: "center",

alignItems: 'center',

backgroundColor: '#680001',

borderColor: '#680001',

borderRadius: 8,

paddingVertical: 12,

paddingHorizontal: 40,

position: 'relative',

minWidth: 280,

btnFull: {

minWidth: '100%',

TextStyle: {

fontSize: 16,

color: "#ffffff",

fontFamily: 'Montserrat-SemiBold',

textRight: {

flexDirection: 'row',

justifyContent: 'flex-end',

alignItems: 'center',

whtTextColor: {

fontSize: 14,

color: "#ffffff",

fontFamily: 'Montserrat-Regular'

whtTextBoldColor: {

fontSize: 14,

color: "#ffffff",

fontFamily: 'Montserrat-Bold'

transacList: {

marginTop: -16,

transacItem: {

paddingHorizontal: 16,

paddingVertical: 16,

backgroundColor: '#ffffff',

borderRadius: 8,

shadowColor: "rgba(0,0,0,0.5)",

shadowOffset: {

width: 0,

height: 2

shadowOpacity: 0.25,

shadowRadius: 8,

elevation: 5,

flexDirection: 'row',

justifyContent: "space-between",

//alignItems: 'center',

marginTop: 16,

transacColFirst: {

flex: 0.7,

transacColSecond: {

flex: 0.3,

alignItems: 'flex-end',

transacTtl: {

marginBottom: 4,

transacDate: {

marginBottom: 4,

textBig: {

fontSize: 16,

color: '#000000',

fontFamily: 'Montserrat-Regular',

});

}

export default My_pagination

Thank you for visiting… Happy Learing 🙂

Total views : 248

About Author

@rahul

Website designer, Full stack developer, Blogger with 10+ years of experience.

FineTricks.com

Load More – Pagination trick with react native

1. Create load more button in component

2. Create function for append load more records

Full Code:

About Author

@rahul

Add a Comment

1. Create load more button in component

2. Create function for append load more records

Full Code:

Related Posts

About Author

@rahul

Add a Comment