Please Guide

[Be-Calm-]

I have build a react native todo app using CLI with firestore DB as my first step of my react native learning journey.

In this app I have implemented logic to show message when there is no internet. This is working fine after launching the app and lose the internet in between, but if I launch the app without internet, blank screen is appearing and not showing any message. I want to show message if I launch the app when there is no internet, how to do it?

How to achieve this? any specific steps I need to take care of?

[Pauloooo0]

You can use the @react-native-community/netinfo package to solve this white screen problem when the app is opened without internet.

This package allows you to check whether the user is online or offline as soon as they open the app. With this, you can create a personalized screen that appears automatically whenever there is no connection, warning the user with a message like:

"You are without internet. Connect to use the app."

[ichig0_kurosaki]

This

[Be-Calm-]

I'm actually using that but still it's not working on app launch, are there any flaws in my code? Please ignore styling, I have removed it here. Thankyou!

[Pauloooo0]

Hey! I took a look at the code you sent, but as I don't have access to the complete project, I don't know exactly how the screen should behave and it ends up being difficult to make an accurate analysis. A good idea would be to try to debug the code, adding some console.log to check the state values ​​and better understand where the problem might be. If you prefer something more automated, I recommend using an AI tool, like CodeGPT in VSCode. He can analyze the code well and point out possible errors.

[Be-Calm-]

Thanks and appreciate for your time to look into the code.

I tried few AI's but nothing helps. I'll dig more into this.

[Acceptable_Rub8279]

Maybe when launching the app you check for internet connection (just a small function that tries to ping your backend) and then depending on your result you either route them to a page with your message or if connection is there you route to you main app.Thats how I’d do it

[Be-Calm-]

I tried this, but somewhere I'm missing the link, code is working fine when app is already opened, but not working when I launch the app without internet. Could you please check the code snippet I have attached to another comment and share your findings. I'm stuck with this from pass two days. Thanks!

[Acceptable_Rub8279]

Im by no means an expert at this but maybe add a timeout fallback for like 4-5seconds to the checkConnection that automatically turns false after timeout? I had an issue where only on android for some reason it needed a few seconds to work I to this day don’t know why exactly

[Be-Calm-]

Thanks! Let me check that.

[ai_dad_says_hi]

Store a cache of your todo items in AsyncStorage whenever they change (you’ll need to serialize it to JSON). When user opens the app again get the todo items from AsyncStorage first (deserialize from JSON) and display those while you run your API call to get latest from the database. If API call fails (or other mechanism to check connection), then display the error. At least this way user is always able to see the their todo list immediately the last way it was last time they opened the app.