nb-header causes status bar color to change

Description of the bug I set a status bar color in app.json and include a status-bar element at the top of my app. However, whenever I go to a page that has a nb-header, the color of the status bar changes to the default blue, and then every page sets to this color

To Reproduce In App.vue in src, put a status-bar element above app-navigation. Use app.json to set the status bar color. Create another page and add it to your app drawer and have a nb-header at the top of that page. Now navigate to that page and your status bar color will change.

What I expected I expect to be able to set a status bar color in app.json and that color be consistent throughout the application.

Screenshots If applicable, add screenshots to help explain your problem. Code: app.json:

App.vue in src:

RecipesScreen with nb-header element:

App: -Open app -Open drawer -Navigate to Recipes which has nb-header and status bar color changes -Showing that going back to home, the color is changed still

Did I use vue-native-cli to create the project? Yes

Am I using Expo? Yes

Development platform (please complete the following information):

• Shell/terminal: [e.g. ZSH, PowerShell]

[JohnVicious]

Hope this could help, I am still looking for some way to make it consistently instead of every screen.

Update: I have a solution here

1. Use app.json or place an status-bar above app-navigation as your code

2. Wrap the nb-header to a new element with the 2 mentioned property and use the new element as header

That is actually not a bad idea, that way any time I want to use the header element, I can use that new element as my header. Just want you to know I just got back to my code and your suggestion of marking the color on the element itself did the trick. Thank you very much.

[doubleh311]

Are you saying instead of having the status bar at the top of the app-navigation, have it on each screen instead?

Yes because the nb-header have set the status-bar and here what I have updated my nb-header

<nb-header noShadow :style="style.nbHeader" :androidStatusBarColor="'#ffffff'" :iosBarStyle="'dark-content'"> ... </nb-header>

I use this for screen I have nb-header, with screen I don’t use header, give it status-bar with the same style.