The navigation behavior I am trying to achieve is best understood by looking closely at Instagram:
- You start in the Feed and then scroll to let’s say 4500px & click on a username
- A new layer is created above the feed layer (“back-stack”)
- Then you scroll & check out the user’s profile
- (If you continue and view other users or posts - additional layers get created on top of the existing layers)
- Once you hit the back button - the layer on top gets closed and you get to the layer below - which in this case would be the Feed & you can continue where you left off (scroll-position 4500px)
In my app I have got an infinite scroll feed and if I hide it - and show it again when the user goes back - the UX is very bad, because the RepeatingGroup’s Content needs to be reloaded and the user gets taken to the top (scroll-position 0px).
- First Problem: How am I able to create these layers? Using 1 group for all users, results in having to reload that group again & again.
- Second Problem: How to “hide” the groups below without hiding them in a bubble sense?
- I thought about Popups but they don’t seem to work how they should.
- I was thinking about “hiding” the groups by reducing their height to 0px/1px using CSS. However I was not able to do it properly.
Has anyone any ideas on how to achieve that? Or maybe some other ideas on how to achieve the intended behavior smoothly?
I believe “back-stacks” are a much needed feature for bubble - to create really good mobile applications.
Thanks in advance.