NativeScript: Page navigating order of events

Updated for V5 of NativeScript

Duals_graphsI'm always having to reference my own notes to remember this; so I figured I would put a blog article up describing this so that everyone can benefit from my forgetfulness.   😉

Navigating
When you do a frame.topmost().navigate('destinationPage');  there is a specific order of events;

Source page fires: navigatingFrom
Destination page fires: navigatingTo
Destination page fires: loaded
Destination page fires: layoutChanged (Broken on iOS, see notes)
Source page fired: unloaded
Source page fires: navigatedFrom
Destination page fires: navigatedTo

Modal Screen
If you are using a sourcePage.showModal('modalPage','',callback); the events are different.

Modal page fires: showingModally
Modal page fires: loaded
Modal page fires: layoutChanged (Broken on iOS, see notes)
Modal page fires: shownModally

on closing the modal:
Source page is in callback you provide the showModal function
Modal page fires: unloaded

Gotcha's

  • layoutChanged - The pages layout should be all calculated , so you can get layout values at this point, so don't use any event before this.     Currently doesn't fire on iOS -> (per bug #7085)
  • Currently in NativeScript you cannot cancel a navigation. (per bug #583)
  • On iOS you can't use page.showModal in page loaded event; you must wait until the navigatedTo event.   (This appears to be fixed in v1.5 per bug #779)
  • On iOS; if you are using animation the destination page loaded event is fired after the page animates in.  If you need need to have bindings evaluated to make your interface look nice you need to use the navigatingTo event to setup the binding.
  • Do not use anything frame related in the navigatingTo event; the page has not been fully initialized until the loaded event is fired.  The also applied to some page functions like showModal & getViewById.  In other words; be very careful when messing with the new page in the navigatingTo event.  This is the expected behavior; so do not file a bug report.  The onNavigatingTo event is telling you that it is going to load this page.
  • On iOS do not use another ShowModal or navigate inside a showmodal dialog.  It will fail.
  • Testing in the Preview app can and will output logs in the wrong order; this is a known issue with the Preview app with all console logs no matter the app; they can be out of order in any app using the preview system...

If you have any more gotcha that I haven't seen; please feel free to comment.  As usual; if you have any ideas for blog posts; please feel free to ask.

Event order test application is at: https://github.com/NathanaelA/event-order

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.