Tabview flashing transition

@jbarnabe

@jbarnabe commented on Wed Oct 24 2018

I'm encountering a problem with the 'Tab Navigation' template of Nativescript (V4) with Angular, forAndroid, on emulator (Nougat v7.1.1) or on the device (Oreo 8.1).

When I navigate between tabs, the screen "flashes". The behavior seems linked to the use of several "page-router-outlet".

I tried the solution described Nativescript Forum, without success.

With the <item name=“android:windowAnimationStyle”>@null</item> in AppThemeBase, I encounter an error of the type

System.err: com.tns.NativeScriptException:
System.err: Calling js method onViewAttachedToWindow failed
System.err:
System.err: TypeError: Cannot set property 'transitionType' of null
(both on emulator or device).

a little video showing the problem

I have create a StackOverflow question with no success : https://stackoverflow.com/questions/52854414/nativescript-tabview-flashing-transition

Originally posted by @jbarnabe in NativeScript/nativescript-angular#1351 (comment)

@rchougui commented on Wed Oct 24 2018

I confirm same issue happening to me.

@tsonevn commented on Thu Oct 25 2018

Hi @jbarnabe @rchougui,
I was able to recreate the issue on my side in a the non-Angular project, and I will mark it as a bug. We will investigate further the case and will provide more info in the issue.
I am also attaching a sample project, which can be used for debugging.
Archive.zip

@jbarnabe

@jbarnabe @tsonevn We have found this issue to be linked to 2 key things in core modules:

For iOS we need a way to set nav bar hidden much earlier and without animation, ie:

constructor(frame: Frame) {
  this._controller = UINavigationControllerImpl.initWithOwner(new WeakRef(frame));
   // This needs to be set early to avoid white flashes when changing page-router-outlets preferably in the constructor for iOS frame
  this._controller.setNavigationBarHiddenAnimated(true, false);
}

We've also found it helps for iOS to set transparent background on the controllers when they are constructed, ie in page.ios.ts where this occurs:

const controller = UIViewControllerImpl.initWithOwner(new WeakRef(this));
this.viewController = this._ios = controller;
// controller.view.backgroundColor = whiteColor; (This is what it's doing now which obviously could cause a white flash)
controller.view.backgroundColor = new Color("#00000000").ios; // instead could ensure transparent to start

on Android the fix resides in nativescript-angular PR here:
fix(tabview): prevent white flash on tab changes nativescript-angular#1569

@NathanWalker

Hi @NathanWalker, thx, I'm going to try this

@NathanWalker

After migrating to the final version 5.0.0 I no longer have the problem (and without applying the correction proposed by @NathanWalker)

I'm still experiencing this issue with the latest version. The flash goes away after navigating between tabs a couple of times

@MrToxy

HI @MrToxy,
Can you send us a sample project, which demonstrates the issue, you are facing?

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Navigation Menu

Repository navigation

Tabview flashing transition #6454

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Tabview flashing transition #6454

Description

Activity

NathanWalker commented on Oct 25, 2018

jbarnabe commented on Oct 25, 2018

jbarnabe commented on Nov 7, 2018

MrToxy commented on Apr 12, 2019

tsonevn commented on Apr 15, 2019

lock commented on Apr 15, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions