{"id":191,"date":"2016-01-03T17:30:37","date_gmt":"2016-01-03T17:30:37","guid":{"rendered":"http:\/\/fluentreports.com\/blog\/?p=191"},"modified":"2019-05-21T05:25:05","modified_gmt":"2019-05-21T05:25:05","slug":"nativescript-page-navigating-order-of-events","status":"publish","type":"post","link":"http:\/\/fluentreports.com\/blog\/?p=191","title":{"rendered":"NativeScript: Page navigating order of events"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Updated for V5 of NativeScript<\/strong><\/p>\n\n\n<p><a href=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Duals_graphs.png\" rel=\"attachment wp-att-193\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-193\" src=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Duals_graphs-300x214.png\" alt=\"Duals_graphs\" width=\"300\" height=\"214\" srcset=\"http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Duals_graphs-300x214.png 300w, http:\/\/fluentreports.com\/blog\/wp-content\/uploads\/2016\/01\/Duals_graphs.png 313w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>I'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.\u00a0\u00a0 \ud83d\ude09<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Navigating<\/strong><\/span><br \/>When you do a<em> frame.topmost().navigate('destinationPage');\u00a0<\/em> there is a specific order of events;<\/p>\n<p>Source page fires: <strong>navigatingFrom<\/strong><br \/>Destination page fires: <strong>navigatingTo<br \/><\/strong>Destination page fires: <strong>loaded<br \/><\/strong>Destination page fires: <strong>layoutChanged (Broken on iOS, see notes)<\/strong><br \/>Source page fired: <strong>unloaded<\/strong><br \/>Source page fires: <strong>navigatedFrom<\/strong><br \/>Destination page fires: <strong>navigatedTo<br \/><\/strong><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Modal Screen<\/strong><\/span><br \/>If you are using a sourcePage.<em>showModal('modalPage','',callback); <\/em>the events are different.<\/p>\n<p>Modal page fires: <strong>showingModally<\/strong> <br \/>Modal page fires: <strong>loaded<br \/><\/strong>Modal page fires: <strong>layoutChanged (Broken on iOS, see notes)<\/strong><br \/>Modal page fires: <strong>shownModally<\/strong><\/p>\n<p>on closing the modal:<br \/>Source page is in <em>callback<\/em> you provide the <em>showModal<\/em> function<br \/>Modal page fires: <strong>unloaded<br \/><\/strong><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Gotcha's<\/strong><\/span><\/p>\n<ul>\n<li>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.\u00a0 \u00a0 \u00a0Currently doesn't fire on iOS -&gt; (per bug <a href=\"https:\/\/github.com\/NativeScript\/NativeScript\/issues\/7085\">#7085<\/a>)<\/li>\n<li>Currently in NativeScript you cannot cancel a navigation. (per bug <a href=\"https:\/\/github.com\/NativeScript\/NativeScript\/issues\/583\">#583<\/a>)<\/li>\n<li>On iOS you can't use <em>page.showModal<\/em> in page <strong>loaded<\/strong> event; you must wait until the <strong>navigatedTo<\/strong> event.\u00a0\u00a0 (This appears to be fixed in v1.5 per bug <a href=\"https:\/\/github.com\/NativeScript\/NativeScript\/issues\/779\">#779<\/a>)<\/li>\n<li>On iOS; if you are using animation the destination page loaded event is fired after the page animates in.\u00a0 If you need need to have bindings evaluated to make your interface look nice you need to use the <strong>navigatingTo<\/strong> event to setup the binding.<\/li>\n<li>Do not use anything frame related in the <strong>navigatingTo<\/strong> event; the page has not been fully initialized until the <strong>loaded<\/strong> event is fired.\u00a0 The also applied to some page functions like <em>showModal<\/em> &amp; <em>getViewById<\/em>.\u00a0 In other words; be very careful when messing with the new page in the <strong>navigatingTo<\/strong> event.\u00a0 This is the expected behavior; so do not file a bug report.\u00a0 The <strong>onNavigatingTo<\/strong> event is telling you that it is going to load this page.<\/li>\n<li>On iOS do not use another ShowModal or navigate inside a showmodal dialog.\u00a0 It will fail.<\/li>\n<li>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...<\/li>\n<\/ul>\n<p>If you have any more gotcha that I haven't seen; please feel free to comment.\u00a0 As usual; if you have any ideas for blog posts; please feel free to ask.<\/p>\n<p>Event order test application is at: <a href=\"https:\/\/github.com\/NathanaelA\/event-order\">https:\/\/github.com\/NathanaelA\/event-order<\/a><\/p>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Updated for V5 of NativeScript I'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.\u00a0\u00a0 \ud83d\ude09 NavigatingWhen you do a frame.topmost().navigate('destinationPage');\u00a0 there is a specific order of events; Source page fires: navigatingFromDestination page fires:&hellip; <a class=\"more-link\" href=\"http:\/\/fluentreports.com\/blog\/?p=191\">Continue reading <span class=\"screen-reader-text\">NativeScript: Page navigating order of events<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[15],"tags":[38,16,37,35,36],"class_list":["post-191","post","type-post","status-publish","format-standard","hentry","category-nativescript","tag-events","tag-nativescript","tag-navigate","tag-page","tag-showmodal","entry"],"_links":{"self":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=191"}],"version-history":[{"count":9,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/191\/revisions"}],"predecessor-version":[{"id":931,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/191\/revisions\/931"}],"wp:attachment":[{"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=191"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/fluentreports.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}