Show a message only once (onboarding example)

When your user first downloads your app it’s quite common to show them some sort of welcome message, or some instructions about how to use your app.

This is a great idea for someone who has just installed your app, but for someone that opens your app regularly this can become repetitive and annoying.

In this tutorial, we’ll look how you can use stored variables to show an onboarding message the first time a user opens your app, but hide if from them every time they subsequently open your app.

What we’re building

In this example, the onboarding screen is shown when the app is installed and opened for the very first time. Every other time (including after the app is updated!) the app skips straight to Screen2


On Screen1 we create a variable called onboardingCompleted. As the name implies, we’re going to use this variable to keep track of whether or not the user has completed the app onboarding. This default value for a stored variable isnull which is important to know for the next step.


Every time the screen opens, we test whether the onboardingCompleted value is null. This will be true the first time the app opens, and to prevent it from being true again, we just need to give it any value we want. You can choose something like 1 or true or "yes" - literally anything!

After this we go to the onboarding screen. You needs might be slightly different here. Perhaps instead of opening a dedicated screen you might show an alert or make a label visible for a few seconds and hide it again. This part is also totally up to you.

Finally, every time the user opens the app, except for the first time, the app will automatically navigate to Screen2



In the animation above, my Scree2 just has a label and a HomeButton. Here are the blocks for this button:


While testing, it became pretty tedious to have to constantly uninstall and then reinstall the app over and over again just to see my changes to the onboarding screen, so I also created a resetButton that works like this:

Onboarding Screen

As I’ve already mentioned, you can use anything your like for the onboarding like a label, a sound, an alert or a video, but here are the blocks I used in the animation above:



If you want to remix this app for yourself, just click on the following link:



I just prefer tinyDB / LocalStorage instead of stored variables :smile:

Thanks! :blush:

I don’t understand why but I tried something similar (when a stored variable is empty the user should be navigated to Screen1 for an intro) but it does not do anything. Not even when I add “navigatetoscreen1” without any if question… :confused:

update Is it not possible to navigate to a screen contained in a stackable navigator? or is this a bug? because it seems to work for screens that are within the same (bottom) navigator and also for navigating to the stackable navigator itself but none of the screens that I placed within the stackable navigator :thinking:

best, Chris

I have been considering switching to this method to try to keep things faster. Do you notice a slowdown when storing info using localDB vs a stored var?

Hi, @jgibb20189! :wave:

I always notice a slowdown every time I use any of the 3 types of Variables. (App. Cloud, Stored).
Also, I haven’t used localDB yet, so I can’t say about it…

That’s the reason I use LocalStorage over all local storage methods.

Thanks! :blush:

THanks for the input @kartik14!! Doesn’t that require extra blocks? do the extra blocks also not cause a slow down?

1 Like

Hi, @jgibb20189! :wave:

Yes, It causes extra blocks, but it’s more efficient method rather than using Stored Variables (which cause a great slowdown).

Thanks! :blush: