How to fetch json and display img in flatlist (React Native) - react-native

Question

I'm working on a small react native app which can fetch json and display gifs in flatlist.
But it is not working and i don't know where is the problem!
export default function App() {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.tenor.com/v1/random?key=1FS646G91JAT&q=meme&limit=50')
.then((response) => response.json())
.then((json) => {
const array_URL = []
for (var i = 0; i < 50; i++) {
array_URL.push(
{
id: i + 1,
url: json.results[i].media[0]["mediumgif"].url
}
)
}
setData(array_URL)
})
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
return (
<View style={{ flex: 1 }}>
{isLoading ? <ActivityIndicator /> : (
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Image
source={{ uri: item.url }}
/>
)}
/>
)}
</View>
);
}
Can anyone please tell me where the problem is?
Thanks a lot!

Answer 1

Here is a demo.
snack: https://snack.expo.io/#ashwith00/belligerent-celery
import React, { useState, useEffect } from 'react';
import {
View,
Text,
ScrollView,
useWindowDimensions,
ActivityIndicator,
FlatList,
Image,
} from 'react-native';
export default function App() {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://api.tenor.com/v1/random?key=1FS646G91JAT&q=meme&limit=10')
.then((response) => response.json())
.then((json) => {
const array_URL = [];
for (var i = 0; i < 10; i++) {
array_URL.push({
id: i + 1,
url: json.results[i].media[0]['mediumgif'].url,
});
}
setData(array_URL);
})
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
console.log(data);
return (
<View style={{ flex: 1 }}>
{isLoading ? (
<ActivityIndicator />
) : (
<FlatList
extraData={data}
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Image
resizeMode="cover"
style={{ alignSelf: 'stretch', height: 200 }}
source={{ uri: item.url }}
/>
)}
/>
)}
</View>
);
}