Hello all, is this do-able? Seems like a pretty standard navigation option, but I can’t get it to look and work like I want.
I tried it with a top tab and functionally it was perfect. But I couldn’t remove it. I could only make it smaller. And the other 2 Navigator options aren’t super elegant with my UI, either.
Thoughts? Ideas? Bad news?
Cheers,
Dean…
Hi @deanmachine,
I recently created a ‘welcome’ or 'onboarding screen using HIDDEN (well more or less) top bar navigation.
Okay, so I know your OP says that you don’t want to use top bar nav, and I assume thats because you can see it and it doesn’t look clean.
Well, if you adjust the settings right, you can ‘hide’ the top bar and just have swipe screens. In this case I am assuming you are okay with a black ‘StatusBar’.
There is a small overlap of nav bar below the Status Bar (about 30px) that will need to be colored to match the Status Bar background.
Top Tab settings:
Screen settings:
The main/ relevant options for each screen are as below on the Basic component area;
After the last swipe screen (let’s assume there is a button on it) you can store a variable so the user doesn’t keep coming back to the welcome/ onboarding screens if they’ve already visited it, by having the first swipe page redirect to the main/ home screen.
I have on the last slide;
And on the first swipe screen;
else on there for errors etc.)
Here is an example of the final swipe screen (mid swipe), for clarity I have made the small tab bar RED, but normally it would be the same color as the Status Bar so you only loose that 30px.
Hope that helps! 
Clever solution, @hdawc. Thanks for sharing all the screens.
Do you know if it’ll work with a bottom navigator, by chance? I can give up 30px a little more easily there. If not, no worries. I’ll tinker with it and see if I can make it work.
UPDATE: Looks like swipe is only an option on a top tab navigator.
Cheers,
Dean…
Hey @hdawc, I’m not able to get the top tab height as short as you have, for some reason. Mine is still considerably taller.
I don’t have the Scroll Enabled feature on Top Tab > Advanced as an option (could that cause it?). But I double-checked my other settings vs yours and don’t see where mine is different. Does it jump out to you?
TOP TAB -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
SCREEN -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
PHONE -~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
Don’t use drag and drop (DnD), it’s newer and not as refined. To be fair the original designer is also drag and drop, just a different kind.
I don’t think the Thunkable team thought about the fact that while users of desktop builders like Adalo or Bubble might want to place components anywhere, mobiles generally don’t need that (plus Adalo has snapping to the center, which DnD doesn’t have, so it makes it even more frustrating that Thunkable created a bad implementation of this UI for mobile design…).
As you can tell, I don’t like the DnD designer. It has less advanced features and the centering of text and components is flimsy at best, fortunately they seem to be improving that, but I don’t think all the options I showed you are not in the DnD designer, if they are, they it clearly doesn’t work or doesn’t display properly on the Live app.
Sorry I can’t be of more help, I think if you were using the StP style designer, it would work.
You could try creating it in there, then click the “Convert to Drag and Drop” button and cloning the screen over to your main project?
That’s what I was afraid of b/c the UI in your screenshots are different than what I see.
The 2 screens I want to swipe between are my really complex ones, so I’ll have to decide if it’s worth re-creating in StP and importing.
Thanks for taking time to help me out, tho!! Greatly appreciate it.
Dean…
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
