Show loading indicator in React Native when rendering screens

1k views Asked by At

I'm making an app with React Native, and I have a doubt. I have a navigator with various screens. When the screens are small / easy, the navigation is instant and it feels fast, but when the screen I need to navigate to is big / shows a lot of icons/images, etc., the screen freezes when I press the navigation button untils it renders the screen and then it navigates there.

Is there any way to show a loading indicator when this happens? Because my screens are taking 500 to 1000ms to render and it makes the UX bad by freezing.

1

There are 1 answers

1
Davide Ceresa On

If you are using Expo, try to use the <AppLoading /> component, this allows to load some files like images before. Here's the link to the documentation https://docs.expo.io/versions/latest/sdk/app-loading/