fix(android-tabs): tab backgroundColor cache can be wrong - DO NOT MERGE by NathanaelA · Pull Request #8510 · NativeScript/NativeScript

NathanaelA · 2020-04-07T07:41:15Z

PR Checklist

The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
You have signed the CLA.

What is the current behavior?

Currently on android if you set the Tab & TabView's background color; it cache's the color when you leave the page and resets it when you return to the page. (Good behavior so far). However, if you navigate away; and then change the global CSS from say light theme to a dark theme, then return back to the page with a tab/tab-view the tab attempts to use the old cached color, despite the CSS system passing a new backgroundColor into the control on refresh.
On tab-views; the ViewPager can cache the background color; so we need to force it to change the color also.
Crashing issue with updateAndroidItemAt during startup of control.

What is the new behavior?

This clears the _originalBackground cached value if a new backgroundColor is set.
sets the viewPagers color also
Adds a safety check to make sure updateAndroidItemAt can't update something that doesn't exist.

Fixes/Implements/Closes #
Fixes two issues repoted in NativeScript-Themes repo with the "tabs" and "tab-view" controls.

… nativeview pointer.

vtrifonov · 2020-04-10T13:38:37Z

Sign in to view

+
        if (value instanceof Color) {
            this._tabLayout.setBackgroundColor(value.android);
+            this._viewPager.setBackgroundColor(value.android);


We shouldn't set the background color of the viewPager here as this should change only the background of the tab bar, but not the tab page as well. You can check the following page in the UI test project - https://github.com/NativeScript/NativeScript/blob/master/e2e/ui-tests-app/app/tab-view/all-page.xml

vtrifonov · 2020-04-10T13:41:29Z


    public updateAndroidItemAt(index: number, spec: org.nativescript.widgets.TabItemSpec) {
-        this._tabsBar.updateItemAt(index, spec);
+        if (index < this._tabsBar.getItemCount()) {


I guess the same changes should be applied here - https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts#L703

vtrifonov · 2020-04-10T13:43:21Z

Sign in to view

    }

    public setTabBarBackgroundColor(value: android.graphics.drawable.Drawable | Color): void {
+        this._originalBackground = null;


and this should be applied here - https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts#L711

vtrifonov · 2020-04-14T09:37:45Z

@NathanaelA did you have a chance to view the comments?

vtrifonov · 2020-04-15T20:42:27Z

@NathanaelA you can use e2e/ui-tests-app as an example app.

cjohn001 · 2020-08-20T23:06:09Z

@NathanaelA
I have seen that you have already partly implemented a fix for the issue. As the issue seems to be a difficult one, and as it is somewhat older already, I was wondering, if you might recommend a workaround for it as long as the bug is open.The bug (background lost and white bg instead) appears for me if I use a goBack navigation which goes back to a tab view. Is there a way I could force to refresh the background on the tab control before it is rendered? Thank you very much for your help!

Best regards,
Christoph

cjohn001 · 2020-08-21T19:40:30Z

@NathanaelA ,
thank you very much for the directions!

Could you maybe send me a link to an example on how I can store/restore the background? I have unfortunately never seen how one can do this. I am using NS Angular. Which lifecycle hooks would I have to use here? I tried out the following code, but without success. If I return to the page the background stays white, even so the loaded function is called and I set the color.

@HostListener('loaded')
pageInit() {
const backgroundGrid = this._pageBackgroundGrid.nativeElement as GridLayout;
backgroundGrid.style.backgroundColor = new Color('red');
}

I am not sure if it is related to this bug. But I currently run into problems with a couple of controls (ui chart, ui calendar) loosing their styles on IOS when the app leaves the background / resumes from background, or after the screensaver was activated. The controls then appear with the default styles rather than the ones set via palettes or a style service. The bugs are documented in the following issues, and I have not found a way yet, to redraw the controls before they appear on screen with the wrong styles. Currently, I am using the loaded event of the controls to force a refresh through resetting their data. But this is too late in the livecycle of the controls. When the app resumes the user sees the controls with the wrong styles for about half a second. Maybe the approach you described would be the right workaround as well?

#8775
ProgressNS/nativescript-ui-feedback#1335

Are these issues related to the same underlaying problem we are dealing with here?

Final question: Are you currently working on this issue and I can expect a fix soon. Then I would proceed with other parts in my app development till the fix is there. But nevertheless it would be great if you could explain the way to store the css. It might help me at least with the other bugs.

If I can help with testing, please let me know. And thank you very much for your support.

Best regards,
Christoph

NathanWalker · 2020-10-27T20:57:49Z

Further investigation into property (and CSS in general) handling will be done separately.

Nathanael Anderson added 4 commits April 7, 2020 01:36

Fix Background color cache not clearing on background change.

8cebf31

Background color on viewPager can also get cached

9dd1284

Remove a potential crash during startup of control

7cdad74

Cleanup tabBackgroundColor to actually call the this version, not the…

60e1afe

… nativeview pointer.

cla-bot Bot added the cla: yes label Apr 7, 2020

vtrifonov added 2 commits April 10, 2020 12:13

Merge branch 'master' into tab-backgrounds

82d953d

Merge branch 'master' into tab-backgrounds

0350c2d

vtrifonov suggested changes Apr 10, 2020

View reviewed changes

vtrifonov added 3 commits April 10, 2020 16:45

Merge branch 'master' into tab-backgrounds

3027da6

Merge branch 'master' into tab-backgrounds

d921dc0

Merge branch 'master' into tab-backgrounds

cc8e62b

This comment was marked as abuse.

Sign in to view

cjohn001 mentioned this pull request Aug 27, 2020

[bug] NativeScript Android Tab/BottomNav Issue with backgroundColor #8547

Closed

NathanWalker force-pushed the master branch from 8753605 to 86395da Compare September 10, 2020 15:42

NathanWalker force-pushed the master branch from d4ced42 to 53488b5 Compare September 25, 2020 23:16

NathanWalker marked this pull request as draft October 27, 2020 20:57

NathanWalker closed this Oct 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(android-tabs): tab backgroundColor cache can be wrong - DO NOT MERGE#8510

fix(android-tabs): tab backgroundColor cache can be wrong - DO NOT MERGE#8510
NathanaelA wants to merge 9 commits into
NativeScript:masterfrom
NathanaelA:tab-backgrounds

NathanaelA commented Apr 7, 2020

Uh oh!

vtrifonov Apr 10, 2020

Uh oh!

This comment was marked as abuse.

Uh oh!

vtrifonov Apr 10, 2020

Uh oh!

vtrifonov Apr 10, 2020

Uh oh!

This comment was marked as abuse.

Uh oh!

vtrifonov commented Apr 14, 2020

Uh oh!

This comment was marked as abuse.

vtrifonov commented Apr 15, 2020

Uh oh!

This comment was marked as abuse.

cjohn001 commented Aug 20, 2020

Uh oh!

This comment was marked as abuse.

cjohn001 commented Aug 21, 2020 •

edited

Loading

Uh oh!

NathanWalker commented Oct 27, 2020 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

NathanaelA commented Apr 7, 2020

PR Checklist

What is the current behavior?

What is the new behavior?

Uh oh!

vtrifonov Apr 10, 2020

Choose a reason for hiding this comment

Uh oh!

This comment was marked as abuse.

Uh oh!

vtrifonov Apr 10, 2020

Choose a reason for hiding this comment

Uh oh!

vtrifonov Apr 10, 2020

Choose a reason for hiding this comment

Uh oh!

This comment was marked as abuse.

Uh oh!

vtrifonov commented Apr 14, 2020

Uh oh!

This comment was marked as abuse.

vtrifonov commented Apr 15, 2020

Uh oh!

This comment was marked as abuse.

cjohn001 commented Aug 20, 2020

Uh oh!

This comment was marked as abuse.

cjohn001 commented Aug 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NathanWalker commented Oct 27, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cjohn001 commented Aug 21, 2020 •

edited

Loading

NathanWalker commented Oct 27, 2020 •

edited

Loading