1-Eklenti Kullanmadan
React Native içinde Loading göstermek için ActivityIndicator kullanıyoruz. Öncelikle import işlemi yapmalıyız.
import { ActivityIndicator } from 'react-native';
Import işleminden sonra isloading adında bir değişken tanımlamamız gerekir. Başlangıç değeri false olacak.
const [isLoading, setIsLoading] = useState(false);
Webservisten gelen verilerimiz sayfaya yüklendikten sonra isLoading değerini true yaparak loading görselini sayfadan kaldırıyoruz ve ekrana yeni verileri basıyoruz.
import React, { useState, useEffect } from 'react';
import { StyleSheet, SafeAreaView, ActivityIndicator, TouchableOpacity, Alert } from 'react-native';
import { Left, Body, Right, Thumbnail, Text, Button, List, ListItem, View } from 'native-base';
import { FlatList } from "react-native-gesture-handler";
import axios from 'axios';
export default function RandomUserScreen({ navigation }) {
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const _getRandomUsers = async () => {
setIsLoading(true);
const result = await axios(
'https://www.randomuser.me/api/?results=30',
).then(response => {
console.log(response.data.results);
setData(response.data.results);
setIsLoading(false);
})
.then(json => {
//console.log({ json })
})
.catch(error => {
console.error({ error })
});
}
useEffect(() => {
_getRandomUsers();
//console.log("Uygulama Yüklendi!");
}, []);
return (
<>
<SafeAreaView style={styles.container}>
{
isLoading
?
<ActivityIndicator size="large" color="#00ff00" />
:
<List>
<FlatList
data={data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<ListItem avatar>
<TouchableOpacity
style={{ flex: 1, flexDirection: 'row' }}
onPress={() => {
Alert.alert("kol");
}}
key={index}
>
<Left>
<Thumbnail source={{ uri: item.picture.thumbnail, width: 52, height: 52, }} />
</Left>
<Body>
<Text>{item.name.first}</Text>
<Text note>{item.name.last}</Text>
</Body>
<Right>
<Text note>{item.location.city}</Text>
</Right>
</TouchableOpacity>
</ListItem>
)}
/>
</List>
}
</SafeAreaView>
</>
)
}
const styles = StyleSheet.create({
container: {
},
});
2-Eklenti Kullanarak
React Native içinde Loading göstermek için ikinci yol ise react-native-indicators eklentisi kullanmak.
Kurulum
npm install --save react-native-indicators
Import
import {
BallIndicator,
BarIndicator,
DotIndicator,
MaterialIndicator,
PacmanIndicator,
PulseIndicator,
SkypeIndicator,
UIActivityIndicator,
WaveIndicator,
} from 'react-native-indicators';
Kullanımı
<DotIndicator color='white' />
