Android: ActionBar wrong background-color after back-navigation since 7.2.0

[felixkrautschuk]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 7.2.0
• Cross-platform modules: 7.3.0
• Android Runtime: 7.0.1
• iOS Runtime: -
• XCode Version: -
• Plugin(s): -

Describe the bug When navigating from page A to page B and page B has an ActionBar with a different background-color than page A and the user navigates back from page A, the ActionBar of page A has now the background-color of page B until you navigate forwards to page A.

• This is NOT happening on iOS
• This was not happening with @nativescript/core 7.1.4 -> issue exists since 7.2.0, probably caused by https://github.com/NativeScript/NativeScript/pull/9120

Not sure if it is related only to the ActionBar, but it is the only thing I noticed from our real app at least, the other widgets seem not to be affected.

<!-- page A -->
<Page>
    <ActionBar title="Main page" backgroundColor="CadetBlue" color="white"/>
</Page>

<!-- page B -->
<Page backgroundColor="black">
    <ActionBar title="Detail page" backgroundColor="black" color="white"/>
</Page>

To Reproduce follow the steps from the GIF with the sample app provided below

Expected behavior When navigating back to page A, the ActionBar should have the background-color defined in xml or css, not the background-color from the page B.

Sample project NSAndroidBackgroundColorIssue.zip

Additional context none

[farfromrefug]

I think I am responsible for this. will fix this.

[jwrascoe]

@farfromrefug thanks for looking into this.

[farfromrefug]

@jwrascoe @felixkrautschuk actually this one https://github.com/NativeScript/NativeScript/pull/9223 fixes it. @rigor789 can you look at it?

[rbudnar]

I'm having the same issue although with different symptoms in NS Angular. In my case it is forward navigation to a page with nested router outlets and the action bar changes to the default white color. If I remove the nested router outlets the problem goes away. I've reverted to "@nativescript/core": "7.1.4" to temporarily fix the issue.

[jwrascoe]

@rbudnar its broken in @nativescript/core@latest because this PR has not been released yet.

https://github.com/NativeScript/NativeScript/pull/9223

I have worked around it by forking and applying the PR till it makes it into the main repo.

Not sure when it will be released so I'm using this method till it does.

[rbudnar]

@jwrascoe Thanks! I just wanted to point out the additional symptomatology in case anyone else is experiencing what I am since it is different from the one initially listed in the issue.

[jamescodesthings]

Thanks @rbudnar. Reverting has done the trick while waiting on the PR.

[NathanWalker]

PR flagged for 8.1 - curious if a 7.x patch of it would be worth it?

[jwrascoe]

@NathanWalker it would be handy to have until we all transition to NS8. I started looking at that today... bumped into the enum switch to coretypes (I’m an xplat shop) not sure what else may pop up

[rbudnar]

Either is fine with me. I'd love to just update to 8.x but I can see how the major version bump might not work out for everyone just yet.

[jwrascoe]

@NathanWalker 👍

[jamescodesthings]

Any movement on this issue? It looks like the PR may not yet have been merged. It's the thing holding us back from Updating to 8.

[teha-at]

Is there a bit of progress here? After a long migration to {N}8 this is a blocker to get the new version out to the play store.

[farfromrefug]

@teha-at could you test the 8.1.0 alpha version? (Look on npm) might be fixed there

[teha-at]

@teha-at could you test the 8.1.0 alpha version? (Look on npm) might be fixed there

sorry, looks like in 8.1.0-alpha.1 the problem are still there.

My test procedure was:

ns create testBackground --ng

• Change the @nativescript/core version to ^8.1.0-alpha.1 in package.json
• Replace the ListView because of another error there with a simple button with [nsRouterLink]="['/item', 1]"

Set the background color for the action bars

<ActionBar title="My App" backgroundColor="#2fffca"> </ActionBar>

and

<ActionBar title="Details" backgroundColor="#fdff33"></ActionBar>

Start the app with

ns clean
ns run android --emulator

After a click on the button the detail view with a yellow action bar appears but if i go back the background color is still yellow.

The same code with iOS has no problems, the background color change every time as expected.

[farfromrefug]

@teha-at we have the fix. we need to merge and release (will be 8.1.0 which is alpha stage)

[teha-at]

@farfromrefug I tried it again with 8.1.1 and the error are still there. Do you have any ideas why the fix #9223 don't work?

[rigor789]

@teha-at hmm I'm not sure if we ended up merging #9223 - the reason it was (auto) closed is because the target branch has been deleted.

[teha-at]

@rigor789 oh thats annoying. What can we do to make sure it's in the next version?

[jamescodesthings]

Confirmed the code isn't in the master branch:

git --no-pager grep '_applyBackground'

gives no results.

Can the PR be reopened and targeted at the next branch?

[farfromrefug]

@rigor789 @jamescodesthings @teha-at i opened a PR on master https://github.com/NativeScript/NativeScript/pull/9548

[jamescodesthings]

Now here, to save me having to look again: https://github.com/NativeScript/NativeScript/tree/feat/refactored-background-handling

[OPADA-Eng]

Any updates on this?

[farfromrefug]

@rigor789 t he PR has been released, right ?

[rigor789]

@farfromrefug not yet, I don't think - I did a cleanup pass recently and did some testing to make sure it's all good, and just need to wrap that up.

[jamescodesthings]

Just a heads up that I think this issue can be closed now. It appears the fix is in 8.2.1: https://github.com/NativeScript/NativeScript/blob/8.2.1-core/packages/core/ui/action-bar/index.android.ts#L224

Thanks for everyone's hard work.

[arLevi]

I'm using version "@nativescript/core": "~8.5.0" and also experiencing the same issue - but on <Button> background color

<Button backgroundColor="green"></Button>

(1) Home page -> Clicking on element A -> switching to "details page" -> Clicking the phone's Back button: the buttons background becomes "white" ( font color stay correct )

From that point ^^ - (2) Home page -> Clicking on element A (again) -> switching to the same "details page" -> Clicking on a button with the following code:

goHome() {    
      this.routerExtensions.navigate(['/'], {
          transition: {
              name: "fade"
          }
      });
  }

Suddenly bring the background back