fix: disable broken header collapse on ios

[jfmcquade]

PR Checklist

• [x] 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

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/30bacac7-006f-4f91-8747-60af854964cb

iPhone 15

A phone with a top cutout

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/f88865ac-792c-4158-9f79-d2866da96ae6

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

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/dc9a5f62-9b63-4402-8ff0-222c5d506e03

iPhone 15

A phone with a top cutout

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/2ba00251-6778-43fc-9269-4ca0b889dd9d

[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