[Marek]

Hi

I need to change status bar font color black/white when I’m changing my app background color.

All is fine when user uses “Light Mode” in iPhone, I’m drawing Rectangle with proper color and changing statusbar font color with

nativeUtils.setStatusBarStyle(setWhite===1 ? NativeUtils.StatusBarStyleWhite : NativeUtils.StatusBarStyleBlack)

but if user uses Dark Mode in his iPhone this does not work, I mean I’m settings white Rectangle where Statusbar is (in my app) and iPhone always display text in white fonts.

I have followed this explanation https://felgo.com/developers/forums/t/android-statusbar-style and also as suggested this GitHub example https://github.com/jpnurmi/statusbar qtstatusbar works on Android, does not work on iOS when I add Felgo to the Qt (works as it is with just the Qt) – I can see just black statusbar, so I disabled this on iOS and used nativeUtils.setStatusBarStyle and it works fine until user sets Dark Mode in iPhone.

I have read these posts about disabling or opt out of DarkMode https://stackoverflow.com/questions/56537855/is-it-possible-to-opt-out-of-dark-mode-on-ios-13 I’m setting values in plist.info but nothing seems to work – I have always white font in statusbar.

Some advice would be appreciated.

Best

Marek

 

[Marek]

I have also tested this code

void MyStaticClass::setDarkMode() {
   // UIWindow.appearance.overrideUserInterfaceStyle =UIUserInterfaceStyleDark;
    
    UIWindow *keyWindow = [[UIApplication sharedApplication] keyWindow];

    QIOSViewController *viewController = static_cast<QIOSViewController *>([keyWindow rootViewController]);
    if (@available(iOS 13.0, *)) {
        viewController.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
        NSLog(@"darkmode:%ld",viewController.overrideUserInterfaceStyle);
    }

   // [viewController setNeedsStatusBarAppearanceUpdate];
}

NSLog says it is changing 1-light 2-dark but statusbar text stays the same – white fonts

Best Regards

Marek

[Marek]

Hi

I have created minimal example for iOS

https://github.com/frankipl/felgo_statusbar.git

I have added into ios/Project-Info.plist

<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleDarkContent</string>

and for a second when app is starting I can see black status bar text, but it changes to white again.

Best Regards

Marek

[AlexFelgo Team]

Hi Marek,

thanks for the detailed report. I can confirm that the status bar seems to ignore the black style if the device is using dark mode. I’ll forward this to the dev team to see if this can be changed.

As workaround for now, you could check if the device is using dark mode on iOS (example in this post), and in such a case, always use a darker color behind the status bar?

Best,
Alex

[Marek]

Hi Alex

Thanks for looking into this. UI project of the app is quite demanding, not going into details I can’t just set dark background, but the app I’m working on will be ready in about two months, so there is some time to make it right, maybe next Felgo release ?

Actually I was testing this example you pointed to and yes I can detect dark mode

Best ,

Marek

[Marek]

Hi Alex

DarkMode is working on iOS with last Felgo release, thanks for that

New thing in Android: now bottom of the app is beneath Android keys (row at the bottom, 3 keys), Is there some property like Theme.statusBarHeight to make some margin for QML elements on the page ?

Best Regards

Marek

[AlexFelgo Team]

Hi,

please refer to https://blog.felgo.com/release-3.9.0-webassembly-browser-communication-overlays-tooltips-intros#page-android-display-cutout (or the update changelog).

It has some info and examples on how to tackle this, e.g. using the safeArea property of a Page or the nativeUtils.safeAreaInsets

I’ll also copy over the example here:

import QtQuick 2.5
import Felgo 3.0

App {
  Navigation {
    navigationMode: navigationModeDrawer
    
    NavigationItem {
      title: "Page"
      icon: IconType.square
      
      NavigationStack {
        Page {
          title: "Page"
          
          Rectangle {
            // Use safeArea item of Page for anchoring custom layouts
            anchors.fill: parent.safeArea
            color: "#f04e26"
          }
          AppButton {
            text: "Bottom Button"
            anchors.horizontalCenter: parent.horizontalCenter
            // Anchor an item to the bottom safe area
            anchors.bottom: parent.safeArea.bottom
          }
        }
      }
    }
    NavigationItem {
      title: "Custom Bottom Bar"
      icon: IconType.minus
      
      NavigationStack {
        Page {
          title: "Page"
          
          // This would be your custom bottom bar
          Rectangle {
            color: Theme.colors.tintColor
            width: parent.width
            // Use your content height and add the bottom safe area
            height: dp(50) + nativeUtils.safeAreaInsets.bottom
            // Anchor the whole bar to the very bottom
            anchors.bottom: parent.bottom
          }
        }
      }
    }
    NavigationItem {
      title: "List / Flickable"
      icon: IconType.list
      
      NavigationStack {
        Page {
          title: "List / Flickable"
          
          AppListView {
            width: parent.width
            // This is now applied by default already
            bottomMargin: nativeUtils.safeAreaInsets.bottom
            
            model: 30
            delegate: AppListItem {
              text: "Item " + index
            }
          }
        }
      }
    }
  }
}

Best,
Alex