React-native application fetch http so slow

Question

I just first time to develop an react-native application. I'm using react-native-router-flux for navigation and have to create an feed page that showing feed in Image and Text component using react-native FlatList. The problem is, the application is so slow at getting some data from from remote server, even using localhost.

the data is formated like this

{
    [
        title : "Test title",
        description : "Test Description",
        imageUrl : 'http://192.168.22.22:8887/image.png'
    ],
    [
        title : "Test title 2",
        description : "Test Description 2",
        imageUrl : 'http://192.168.22.22:8887/image2.png'
    ]
}

I have tried to accessing the api url from browser and it done fast as well. But when I'm accessing via my react-native application, it so slow. Like 7 second to wait the page done to load the fetch data. I think the problem is when im using image from remote data. I'm do it like this

<Image
    style={{width: 50, height: 50}}
    source={{uri: HOST_URL + '/' + rowData.imageUrl }}
/>

Is this posible to improve the speed? Is using the loading remote Image influence the speed? Or I must loading images using lazy image loading concept?

Are you remote debugging while fetching data? In some situations, turning "remote debugging" off helps greatly. — Andreyco, Jun 07 '17 at 08:11
Stupid question but worth mentioning: Are you running in a simulator and have you set a network speed limit? — DerpyNerd, Jun 07 '17 at 08:46
Basically, I'm using wifi debugging on my phone without "remote debugging" btw — Adi Sparta, Jun 07 '17 at 13:08

score 0 · Answer 1 · answered Aug 20 '18 at 05:50

0

if you dont have too much images you can save them in your project and use requie("// the address of image in your project") in the source

answered Aug 20 '18 at 05:50

Mojtaba Moshfeghi far

571
1
5
20

React-native application fetch http so slow

1 Answers1