Bug with UnistylesRuntime.insets on iPhone models with old home button design

[nthnism]

Description

Hi there!
First of all, thanks for the awesome library! We really enjoy working with it so far :)

Unfortunately we discovered a bug with older iPhone models. Namely all the ones with the old home button design / without a top notch or dynamic island (e.g. the iPhone SE):

UnistylesRuntime.insets.top reports 0 on development and final builds for those models, while
{top} = useSafeAreaInsets() reports the correct number of 20.
This results in our Scrollview being displayed behind the StatusBar of iOS and is solely depending on the model, not the iOS version.

On dev builds UnistylesRuntime.insets.top will update correctly to 20 only after hot-reloading the app. Please let me know if you need more details to reproduce the issue.

Steps to reproduce

1. Create a simple View with a flex and paddingTop = UnistylesRuntime.insets.top
2. On iPhone models with the old home button it will be 0
3. useSafeAreaInsets() reports the correct number of 20 right away
4. After hot-reloading the bundle UnistylesRuntime.insets.top will be 20 as well

const insets = useSafeAreaInsets();
console.log('insets top UnistylesRuntime', UnistylesRuntime.insets.top);
console.log('insets top useSafeAreaInsets', insets.top);

LOG insets top UnistylesRuntime 0
LOG insets top useSafeAreaInsets 20

Snack or a link to a repository (optional)

No response

Unistyles version

2.10.0

React Native version

0.75.4

Platforms

iOS

Engine

Hermes

Architecture

Paper (old)

[a-eid]

should such devices have bottom insets ?

[nthnism]

I don't think they usually have bottom insets, no. But certainly top insets, as there's still the StatusBar

[nthnism]

This is a screenshot of the first render where UnistylesRuntime.insets.top returns 0.

This is a screenshot after hot-reloading the metro bundler. UnistylesRuntime.insets.top returns 20 now. So it gives the right number eventually, just not during the initial start of the app.

By the way, we use the insets from the mini-runtime, provided as the secondary argument to the createStyleSheet() callback:

const { styles } = useStyles(styleSheet);
...

const styleSheet = createStyleSheet((theme, rt) => ({
exampleView: {
paddingTop: rt.insets.top,
paddingBottom: rt.insets.bottom,
paddingLeft: rt.insets.left,
paddingRight: rt.insets.right,
},
}));

[yousefelgoharyx]

This also happens on iPhone 15 Pro iOS 18.1 but with a twist
whenever the screen orientation change or pip mode starts, all insets become 0
I only can reproduce it on a real device, it doesn't get reproduced in a simulator

[jpudysz]

I'm trying to repro, but it's not easy.
I've used iPhone SE (iOS 18) and console.log insets as soon as possible:

console.log(UnistylesRuntime.insets)

export const App: React.FunctionComponent = () => {...}

Output:

 (NOBRIDGE) LOG  Running "bare" with {"rootTag":1,"initialProps":{"concurrentRoot":true},"fabric":true}
 (NOBRIDGE) LOG  {"bottom": 0, "left": 0, "right": 0, "top": 20}

Insets on iOS platform are synchronous, I've never encountered any issues with them.

[jpudysz]

@nthnism I would need a repro to help, tried multiple things, even first breakpoint shows:

[nthnism]

@jpudysz Thanks for the feedback. I see you're running with "fabric":true.
We are currently not yet using fabric and are on react-native 0.75.4 with the new architecture still disabled.

A minimal app with our current configuration looks like this (real app not mounted; removed all context providers such as SafeAreaProvider from 'react-native-safe-area-context' used for navigation):

console.log('App UnistylesRuntime.insets', UnistylesRuntime.insets);
console.log('App UnistylesRuntime.statusBar.height', UnistylesRuntime.statusBar.height);

const App = (props) => (
   <View>
      <StatusBar />
      <View />
   </View>
);

export default App

leads to output on iPhone SE - iOS 17.4:

LOG  App UnistylesRuntime.insets {"bottom": 0, "left": 0, "right": 0, "top": 0}
LOG  App UnistylesRuntime.statusBar.height 0
LOG  Running "app" with {"rootTag":1,"initialProps":{"concurrentRoot":false}}

Could you give it a try with those initial settings?

EDIT:
I updated the code example above with another log for the statusBar.height, which interestingly also reports 0 on the first run. So maybe the problem is somewhere in the statusBar height measurement, not the insets themselves (not sure how they rely on each other, just a guess)

[jpudysz]

Thanks @nthnism for more details and sorry for the long response. I will take a look tomorrow!

[jpudysz]

Hey @nthnism I've created exact same repro with RN 0.75.4 and old arch:

import React from 'react';
import { StatusBar, View } from 'react-native';
import { UnistylesRuntime } from 'react-native-unistyles';

console.log('App UnistylesRuntime.insets', UnistylesRuntime.insets);
console.log('App UnistylesRuntime.statusBar.height', UnistylesRuntime.statusBar.height);

const App = () => (
   <View>
      <StatusBar />
      <View />
   </View>
);

export default App

There is no additional code. I runned it on iPhone SE 3rd gen 17.5:

 BUNDLE  ./index.js 

 LOG  App UnistylesRuntime.insets {"bottom": 0, "left": 0, "right": 0, "top": 20}
 LOG  App UnistylesRuntime.statusBar.height 20
 LOG  Running "example" with {"rootTag":1,"initialProps":{"concurrentRoot":false}}

So I guess something must interfere with Unistyles? IDK I need a repro to help, otherwise it's only guessing.