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

Screen1

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.

01_onboarding

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

02_ifCompleted

Screen2

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

03_home

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:
04_reset

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:

05_onboarding

Remix

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

https://x.thunkable.com/copy/2ffe3fd43388b078e4b0ed1d9acc2caa

2 Likes

Nice!

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