How to make infinite scroll on react native using scrollview ?

Hello guys.

Right now Im developing a mobile apps system using react-native. I have a lots of data fetching from the database. My problem is when I refreshing the apps, the output of the page become slow due to tons of data in the database. I didnt use flat list or list view to list the data. Im only use the return function to automate the list of data.

So how I want to limit the list data and show when scrolling at the end of the list data

here is my coding

constructor(props) {

super(props);

this.state = {

isLoading: true,

dataSource: null,

 }

 }

componentDidMount() {

return fetch(‘database/viewUser.php’)

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

 .then((responseJson) => {

this.setState({

isLoading: false,

dataSource: responseJson,

 })

 })

 .catch((error) => {

console.log(error)

 });

 }

Capitalize(str) {

return str.toLowerCase().split(’ ').map(function (word) {

return (word.charAt(0).toUpperCase() + word.slice(1));

 }).join(’ ');

 }

trunc(text) {

return text.length > 7 ? ${text.substr(0, 9)}... : text;

 }

render() {

const male = <SimpleLineIcons name=‘user’ size={20} style={{ color: ‘#4699a7’ }} />;

const female = <SimpleLineIcons name=‘user-female’ size={20} style={{ color: ‘#e3927f’ }} />;

const lgbt = <SimpleLineIcons name=‘user-unfollow’ size={20} style={{ color: ‘grey’ }} />

if (this.state.isLoading) {

return (

<View styles={styles.container}>

<ActivityIndicator />

</View>

 )

 } {

let names = this.state.dataSource.map((val, key) => {

let ikon;

if (val.gender == ‘male’) {

ikon = male

 } else if (val.gender == ‘female’ || val.gender == ‘Female’) {

ikon = female

 }

else {

ikon = lgbt

 }

if (val.name != ‘’) {

return <View key={key} style={styles.container2}>

<View style={{ alignContent: ‘center’, justifyContent: ‘center’, alignItems: ‘center’, marginTop: 5, marginBottom: 5 }}>

<View style={{ flex: 1, backgroundColor: ‘#fff’, borderColor: ‘white’, width: ‘98%’, elevation: 1, }}>

<View style={{ flexDirection: ‘row’, width: ‘100%’, height: 80, overflow: ‘hidden’ }}>

<View style={{}}>

<View style={{ position: ‘relative’, width: 80, height: 100, marginTop: 8}}>

<View style= {{justifyContent: ‘center’, alignItems: ‘center’ }}>

<View style={{ position: ‘relative’ , justifyContent: ‘center’}}>

<Image style={{ width: 65, height: 65, position: ‘relative’, }}

source={require(’…/Icons/circle.png’)}

/>

</View>

<View style={{ position: ‘absolute’ }}>

{ikon}

</View>

</View>

</View>

</View>

<View style={{ width: ‘38%’, marginTop: 10 }}>

<Text >{this.Capitalize(val.name)}</Text>

</View>

<View style={{ width: ‘40%’, justifyContent: ‘center’ }}>

<View style={{ flexDirection: ‘row’ }}>

<View style={{ alignItems: ‘center’, marginRight: 5 }}>

<TouchableOpacity style={{alignItems: ‘center’}}>

<Ionicons name=“ios-add-circle-outline” size={30} color="#7b9435" />

<Text style={{ fontSize: 12, color: ‘#7b9435’ }}>Customer</Text>

</TouchableOpacity>

</View>

<View style={{ alignItems: ‘center’, marginRight: 5 }}>

<TouchableOpacity style={{alignItems: ‘center’}}>

<MaterialCommunityIcons name=“eye-off-outline” size={30} color="#f3b959" />

<Text style={{ fontSize: 12, color: ‘#f3b959’ }}>Hide</Text>

</TouchableOpacity>

</View>

<View style={{ alignItems: ‘center’, marginRight: 5 }}>

<TouchableOpacity style={{alignItems: ‘center’}}>

<EvilIcons name=“trash” size={39} color="#a92f3a" />

<Text style={{ fontSize: 12, color: ‘#a92f3a’ }}>Delete</Text>

</TouchableOpacity>

</View>

</View>

</View>

</View>

</View>

</View>

</View>

 } else {

 }

 }

 );

let names2 = this.state.dataSource.map((val, key) => {

let ikon;

if (val.gender == ‘male’) {

ikon = male

 } else if (val.gender == ‘female’ || val.gender == ‘Female’) {

ikon = female

 }

else {

ikon = lgbt

 }

if (val.name != ‘’) {

return <View key={key} style={styles.container2}>

<View style={{ width: 110, height: 130, }}>

<View style={{ flexDirection: ‘column’, height: 100, backgroundColor: ‘#fff’, justifyContent: ‘center’, alignItems: ‘center’, }}>

<View style={{}}>

<View style={{ position: ‘relative’, width: 80, height: 60,marginTop: 5}}>

<View style= {{justifyContent: ‘center’, alignItems: ‘center’ }}>

<View style={{ position: ‘relative’ , justifyContent: ‘center’}}>

<Image style={{ width: 65, height: 65, position: ‘relative’, }}

source={require(’…/Icons/circle.png’)}

/>

</View>

<View style={{ position: ‘absolute’ }}>

{ikon}

</View>

</View>

</View>

</View>

<View style={{ justifyContent: ‘center’, alignItems: ‘center’, marginBottom: 10, marginTop: 10 }}>

<Text>{this.trunc(this.Capitalize(val.name))}

</Text>

</View>

</View>

</View>

</View>

 }

 }

 );

return (

<View style={styles.container}>

<ScrollView showsVerticalScrollIndicator={false}>

<View style={{ width: ‘100%’, height: 130, backgroundColor: ‘#f9f9f9’, elevation: 1 }}>

<View style={{}}>

<View style={{ backgroundColor: ‘#fff’ }}>

<Text style={{ padding: 5 }}>Recent

</Text>

</View>

<ScrollView showsHorizontalScrollIndicator={false} horizontal={true} pagingEnabled={true}>

{names2}

</ScrollView>

</View>

</View>

<View style={{ flex: 1, width: ‘100%’, alignItems: ‘center’, flexDirection: ‘column’, }}>

Hi @zulfahami,

This post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our community organized so users can more easily find information.

As you’ll notice, your topic is now here in the Project Development Help and Advice board. No action is needed on your part; you can continue the conversation as normal here.

Cheers!