Mobile App navigation

Im currently working on a mobile app project and Im trying to figure out how to avoid the “change page actions should not be used in a native app page” issue. I have read some things which say that I have to put everything on the index page with hidden groups. If that is correct, how am I supposed to do that? Isn’t that super messy in the end?


Yes, it is super messy. Bubble is not designed/optimized for mobile app building at this point in time. Any method of getting your app published as a hybrid mobile app is somewhat of a workaround, as Bubble is primarily targeted at building web apps today.

I can thank @vincent56 and @gaby for helping me grasp this concept. Here’s what I learnt from them:

Think of each ‘virtual page’ you want and instead of the page, create a top-level group. Then within those top-level groups, you can put all the groups and elements you wish just as you would do on a page. I tend to put the word PAGE into the Group name so it makes sit easier for me to identify in what will quickly become a cluttered Elements tree. For example, I have top-level groups called ‘Group PAGE Login’ and ‘Group PAGE Search’.

Then make sure each of those top-level groups is not visible on page load (except the initial login one of course). Then put a conditional on each top-level group that says when it should be displayed. Using conditionals for display is easier and safer than using Element Show and Hide actions - fewer mistakes. I tend to have a page custom state and it’s content is used by the PAGE groups to decide if they are visible or not. When the app loads the customer state is ‘login’, then when a user logs in successfully a workflow action sets it to ‘dashboard’ and if they tap the customers button that workflow sets it to customer.list

1 Like