fix: disable broken header collapse on ios

[jfmcquade]

PR Checklist

• PR title descriptive (can be used in release notes)

Description

Disables the header collapse functionality on iOS, which was buggy, see #2242. Now on iOS, setting the APP_HEADER_DEFAULTS.collapse property to true has no effect. The other two properties introduced by #2216, variant and colour, still behave as expected on iOS.

After spending considerable time trying to get the current header collapse implementation to work on iOS, I concluded that doing so would require a rethink of that implementation, see follow-up issue #2249 for more details.

Testing

Whilst altering the config properties and seeing their effects on a local build is not possible without a Mac, I have uploaded an iOS build to appetize here.

The functionality should be identical to that on other platforms when the collapse property is set to false. There is an additional visual element in that on iOS there is additional safe area padding applied at the top of the screen to accommodate the native UI elements and notch, if present. This means the header can appear quite tall on some iOS devices, as it covers the whole top section of the screen.

The config settings for this build were as follows:

config.app_config.APP_HEADER_DEFAULTS.collapse = true;
config.app_config.APP_HEADER_DEFAULTS.colour = "primary";
config.app_config.APP_HEADER_DEFAULTS.variant = "default";

Git Issues

Closes #2242 , which is superseded by #2249

Screenshots/Videos

Demonstration of scrolling working as expected on iOS

Config 1

config.app_config.APP_HEADER_DEFAULTS.collapse = true;
config.app_config.APP_HEADER_DEFAULTS.colour = "primary";
config.app_config.APP_HEADER_DEFAULTS.variant = "default";

iPhone SE

A phone with no top notch/cutout

true.primary.default.SE.mov

iPhone 15

A phone with a top cutout

true.primary.default.15.mov

Config 2

config.app_config.APP_HEADER_DEFAULTS.collapse = true;
config.app_config.APP_HEADER_DEFAULTS.colour = "none";
config.app_config.APP_HEADER_DEFAULTS.variant = "compact";

iPhone SE

A phone with no top notch/cutout

true.none.compact.SE.mov

iPhone 15

A phone with a top cutout

true.none.compact.15.mov

[esmeetewinkel]

Functional test passed on Appetize emulator.

Looking at the emulator I found one other header issue

• Background colour of device header (network / time / notifications / battery etc) same as app header on iOS
  Whereas on my Android device the device header of our apps is grey (whereas for some other apps it does inherit the colour from the app). e.g.
  

And a few more issues which are unrelated:

• Notifications permission pop-up **app_name** is not populated
  I can't remember seeing the equivalent notification when opening the app on Android. Do you give this permission at a different stage on Android?
  

• iOS: icons of the Button card-portrait appear at the top of the page
  template comp_button
  instead of

[jfmcquade]

Thanks, @esmeetewinkel. I've broken out your findings into issues, details below.

• Background colour of device header (network / time / notifications / battery etc) same as app header on iOS
  Whereas on my Android device the device header of our apps is grey (whereas for some other apps it does inherit the colour from the app).

#2261

• Notifications permission pop-up **app_name** is not populated

This appears to just be a result of me manually changing the iOS config files to include our custom app name, and not doing so correctly. I have since built using the yarn workflow ios command available in the feature branch for #2256, and this pop-up correctly contains the value of app_name:

I've also uploaded the build to appetize here.

• iOS: icons of the Button card-portrait appear at the top of the page

#2262