Thanks to visit codestin.com
Credit goes to github.com

Skip to content

iOS: none translucent navigationBar gets translucent again on resume from background #5904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Cookie8 opened this issue Jun 1, 2018 · 6 comments · Fixed by #10694
Closed

Comments

@Cookie8
Copy link

Cookie8 commented Jun 1, 2018

Tell us about the problem

Hi,
For my iOS app I would like to have the navigationBar translucence off.
It works fine, if the page will initially be loaded, but then, if I bring the app to background and bring it back to foreground again (resume), the navigationBar will be displayed
translucent again.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

  • CLI: 4.1.0 (but also occurred with CLI 4.0.2)
  • Cross-platform modules: 4.2.0-2018-05-31-01
  • Runtime(s):
    tns-android: 4.2.0-2018-05-31-01
    tns-ios: 4.1.0
  • Plugin(s): "dependencies": {
    "nativescript-iqkeyboardmanager": "^1.3.0",
    "nativescript-theme-core": "~1.0.4",
    "tns-core-modules": "^4.2.0-2018-05-31-01"
    },
    "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "lazy": "1.0.11"
    }

Please tell us how to recreate the issue in as much detail as possible.

Please use the attached playground project below to reproduce this issue by following these steps:

  1. Run the app -> The translucent is off and the NavigationBar looks as expected.
  2. Bring the app in background by device home button (it must completely be in background)
  3. Bring the app in foreground again -> The NavigationBar background looks to be translucent again, but as I can read in the logs the value of 'page.frame.ios.controller.navigationBar.translucent' will still be 'false'.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Please see my Playground sample app:
NSPlayground.zip

The login page of the Playground sample project contains exactly what I implemented in my project and the issue also occurs in the Playground sample project.

Please just let me know, if you need further infos.
Cheers!


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

@NickIliev
Copy link
Contributor

@Cookie8 there is a property called flat which you can use to turn of the translucency property.

For example,

<ActionBar title="Test" class="action-bar" flat="true">
</ActionBar>

And then there is no need to use the native property in the code behind

const createViewModel = require("./login-view-model").createViewModel;

function loaded(args) {
    console.log("LOGIN-PAGE <-> loaded > start");
    const page = args.object;

    page.bindingContext = createViewModel();
    console.log("LOGIN-PAGE <-> loaded > end");
};
exports.loaded = loaded;

function navigatedTo(args) {
    console.log("LOGIN-PAGE <-> navigatedTo > start");
    const page = args.object;
    console.log("LOGIN-PAGE <-> loaded > end");
};
exports.navigatedTo = navigatedTo;

@Cookie8
Copy link
Author

Cookie8 commented Jun 5, 2018

@NickIliev Thank you very much for your tip, however, if I use the flat property approach only, I will not have the vertical line on the bottom of the actionBar.

This is the result of using the flat property only:
actionbar_using_property_flat

And this is the result of using the translucent property:
actionbar_using_property_translucent

Do you have any suggestion to handle the display of the actionBar's bottom line when using the flat property?

Thank you very much.

@NickIliev
Copy link
Contributor

@Cookie8 the flat property is, in fact, removing the translucency, the "shadow" and the elevation and this is its main purpose to "flatten" the ActionBar.

@Cookie8
Copy link
Author

Cookie8 commented Jun 13, 2018

@NickIliev Yes, I understand the purpose of the flat property and find it's very good to know it - Thank you again for the hint.
But unfortunately in my case the flat property won't be an alternative to the translucent property since I need the native look&feel of the ios navigationBar in my app.
I can live with the current behaviour of the translucent property for my further development, however, in my opinion it's a bug. Or am I wrong?
As I'm pretty new to the NativeScript community I'm not sure what to do now, to 'get the bug fixed' eventually. Do I need to report the issue somewhere else?

@NickIliev NickIliev added bug and removed question labels Jul 5, 2018
@NickIliev
Copy link
Contributor

@Cookie8 thanks you for reporting this issue - here is the right place for posting a bug report. We will investigate the case and post any related information here

@ChaseXC
Copy link

ChaseXC commented Oct 29, 2019

I would like to note that I have run into an issue with the flat property as well, where all I need is the translucence set to false. Putting a SearchBar component within the ActionBar forces the ActionBar to grow a bit. When transitioning between pages, this growth is a smooth transition when flat is set to false, but looks choppy when flat is set to true. Trying to set translucent to false on the loaded event on the ActionBar for every page causes the ActionBar to switch back to translucent during the page transition, before switching again back to non-translucent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants