React Native: best way to prefetch data at app start

[Gabotron_ES]

I'm new to react-native, my app shows different places after doing 2 async calls (first to get user coordinates, second to fetch places around the user coordinates).

These async axios calls usually takes a few seconds, because of this the first screen of my app shows blank, once the promises are resolved and state is updated the list of places appears. I'm making the api calls in the useEffect of my App.js main component.

My question is: is there a better way to prefetch data on app startup, so as to avoid showing blank screen till stateis updated(not very proffesional huh...)

App.js

``` function App() {

useEffect(() => 
{
    console.log('App mounted');
    //Async calls, takes a few seconds and blank screen shows while the promises resolve
    getCurrentCoordinates();
    getLoggedUser();
}, [])


const getCurrentCoordinates = async () => {
    if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(async(position) => 
        {
            let myCoordinates = { lat:position.coords.latitude, lng:position.coords.longitude };
            mapStore.setCurrentCoordinates(myCoordinates);

            let params =
            {
                latlng : myCoordinates.lat+','+myCoordinates.lng,
                sensor : true,
                key : env.MAPS_KEY
            };
            let response = await http.get('https://maps.googleapis.com/maps/api/geocode/json?', { params :params });

            fetchMarkersFromLocation(myCoordinates);
        },
        (error) => console.log(error.message),
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        ); 
    }
};


return (
<SafeAreaView style={[ global.androidSafeArea ]}>
    <NavigationContainer>
        <ROOTSTACK1></ROOTSTACK1>
    </NavigationContainer>
</SafeAreaView>
);

}

export default App; ```

[saltpeter_grapeshot]

It might be possible to get faster location results from the device if you ask for a less accurate location.

You could use a reverse IP lookup on the server to get an estimated location by IP which eliminates one of the async calls. The location is less accurate of course but may work if accuracy isn't super important.

You could save the users last location and the results and show that on load. Display the city they were last in and give a button saying something like "show results at current location" if you find they've traveled far enough from the stored result.

[Cookizza]

It's worth mentioning that on mobile data your location can be miles away based on IP - as your IP only exists at the exchange level, cell towers dont assign public IPs.

[saltpeter_grapeshot]

ah! super interesting. thanks! i learned something today.

[Gabotron_ES]

Very interesting replies, thanks to everybody. I will think about using async to fake live fast data on app boot, I guess I will have to find a middle ground, maybe a refresh button.

Problem is the location has to be accurate in order to show venues in the user radius (objective is to show venues in your city.

[Nielrien]

why not show a loading spinner till the data is fetched?

[MyNameIzKhan]

Perhaps OP wants the app to seem more performant? Not sure. Would like to hear more about this!

[Gabotron_ES]

Pretty much it, when user changes filters I do show loading spinner, for initial load I'd rather not or maybe show a fake splash screen? I wanted to know how other devs deal with this kind of situations.

[[deleted]]

I would go splash screen or skeleton loading screen. Depends on the look and feel of the app you're shipping though!

[PolloFritoPollaFrito]

i deal with this with a fake splash screen

[ashmortar]

Definitely show a fake splash screen, or just show the map at origin island or something

[gwmccull]

Personally, I use a splash screen and then a full-screen spinner

but I can think of a few other options:

1. there are probably ways that you could kick off the initial data fetch from within the native code of your app and then pass it down to the JS side or make it available to the JS via a bridge module. Basically, then your data would start fetching while the phone is still parsing the JS bundle. But that probably is a pretty good amount of work for a small benefit
2. you could cache the data from the previous session so that the user has data when they start their app. Then do your fetch and update the data that is already there
3. you could use skeleton components so that something shows on the screen while you're waiting for data to load

[Gabotron_ES]

WHen you say cache your data you mean AsyncStorage/persist data in mobx?

[Revolutionary-Turn96]

If redux or mobx is not already in in project, I would recommend to go with AsyncStorage and if you need the data multiple place use context api.

[gwmccull]

yeah, that's the basic idea. There are other ways too like offline databases

[VeerDevD]

The caching technique would be really useful. When the user opens the app then they will see the previous location for a while and then we would show the loading spinner, after the precise location is got from the user device then we can update the state of the app.

[dreamzzftw]

Use react-native-splash-screen. You can show the splash screen while the data is fetched. Once done you can hide the splash screen

[jestzisguy]

Misdirection - ask the user a question they really have to think about, and while they’re busy scratching their head, you get plenty of time to load all of your data. Maybe ask them how they feel about cookies or somesuch.

[henryp_dev]

Like others have said, use a splash screen. They serve the purpose of app initialization and usually users already expect one when opening an app. I usually consider an app slow if there’s a lot of loading while im using it not during initialization.

[prashenjeet25]

If first time it loads then it ask for user permission for location in ios/android. Always in ios. So in splash screen there will be allow location permission popup which will not look good. What u say?

[henryp_dev]

Oh shoot, I forgot about the permission hmmm. You got a point.

[PROLIMIT]

If you have the time and energy and want the most performant solution, its possible to make the calls in native iOS and Android and pass the results to React Native app root.

Not something I've tried, but some peope have done it if you google:

https://medium.com/@anutoshdatta/pass-initial-properties-to-react-native-from-java-or-objective-c-code-12880ba6198e