Questions wrt Navigation React Mobile

This question is in relation to the use of the Navigation router on a PWA i.e navigation-react-mobile module

A TLDR;

• are nested StateNavigator’s a possibility in Navigation React Mobile?
• The Refresh functionality works fine but when used in conjunction with a non-router feature (transform animation in CSS for example) the screen seems to visually re-render since the animation restarts from the beginning as the component is re-rendered when the URL changes.

The companion native app(being built using navigation-react-native) is going to be primarily consumer-focussed and i am moving most admin functions to a PWA (except for a a couple of core admin actions).

I have a simple layout since again a mobile form-factor may come into play.

===================================
1) App Name                          =(_menu_)
===================================
2) < (_Arrow_)      Screen title
===================================






3) content 






===================================
4) Static bottom tabs
===================================

A normal native-ish layout. Everything works great.

All the above are embedded within the NavigationHandler 1) and 4) are outside the NavigationMotion component

In certain screens inside 3) i.e. the main content area, i have a tab set (a ‘top tab’) that would display appropriate content for the chosen tab. This would replicate the Android functionality and only update the content area on click. Clicking on a tab will also update the URL based on NavigationData. (eg http://localhost/something?tab=1 to http://localhost/something?tab=2)

The broad outline:

===================================
1) App Name                      =(_menu_)
===================================
2) < (_Arrow_)      Screen title
===================================
3) Top tabs here
===================================





4) content (for the tab) 





===================================
5) Static bottom tabs
===================================

The issue i have is that since all of the content resides inside of the NavigationMotion component, a change to the URL seems to tigger the animation for 2), 3) and 4) before the content is displayed, while i am expecting only 4) to change. My tab header (standalone, i.e separate from the tab content it will display) has the Android-like slide-to animation (using CSS transforms on a separate div below the tabs) but this animation restarts from the beginning on click since the URL changes. I tried the Refresh hyperlink component but get the same result.

I tried several option but none seems to work reliably so far (including react portals, a context-driven portal system that clones a component and injects it outside the the NavigationHandler, etc) or has elements of being ‘hackish’ attempts.

One method did almost work, but I’m not sure if this is a supported feature. I got the idea from the native implementations where each tab can have its own StateNavigator. So i created a new StateNavigator and open this out (in a react portal driven modal so that i can get more screen real-estate). My tabs work fine including the animation. The primary issue - possibly the only issue - is with the back button. Clicking the Back button seems to change the URL to a root URL ie. instead of http://localhost/something?tab=1 it somehow seems to go to a URL that reads http://localhost?tab=1. A subsequent back click corrects this to the expected URL but of course the flow is broken and so is the UI. I am not sure but perhaps this has something to do with the interim URL that the Router generates as part of its core functioning.

Some options i am considering, besides any sudden ideas i get:

• have the tab(and the header) sit outside the NavigationMotion component. I may need have some sort of conditions to display them at the appropriate screen. A reasonable option but ill need to work out the conditions and how to have them in optimally.
• don’t update the URL on tapping the tab. I only lose out on taking the user to the exact tab. I can always take the user to the first tab. This is a reasonable option since the tab functionality is dependent on some guards (finish this step on this tab to go to that step on that tab etc)
• dont worry about the animation of a minor component like a tab. Maybe get rid of the slide-to animation and make them normal tabs with appropriate markings. Having tabheaders separate from content isnt terribly Accessible without additional work

[grahammendick]

The gzip-compression should give you about 70% saving. Paste your JavaScript into this online compressor to get an idea of the saving you’ll get.

[grahammendick]

I’m gonna close this because truncating the crumb trail solves your animation problem. Please let me know how you get on with your PWA