Inconsistent style parsing and event ordering between iOS and Android

[divineniiquaye]

What happened?

I noticed a discrepancy in how styles are parsed and applied on iOS vs Android. The issue appears to originate in the UniwindStoreBuilder class, specifically within the getStyles method.

Expected behavior

The expected execution order during style resolution is:
1. Resolve styles
2. Subscribe to cache
3. Subscribe to re-render
4. Invoke Uniwind methods if present (updateCSSVariables, updateInsets, etc.)
5. Run subscribed events during the re-render
6. Complete
• Trigger additional re-renders if any Uniwind method notifies event dependencies

This flow works correctly on iOS.

Actual behavior on Android

On Android, events are fired before the re-render subscription is established. As a result, Uniwind methods that are expected to notify event dependencies (such as updateInsets) do not trigger the intended downstream updates.

In short:
• Event callbacks execute too early
• Re-render listeners are not yet subscribed
• Dependency notifications from Uniwind methods are missed

Steps to Reproduce

• iOS follows the expected subscription and execution order
• Android triggers events before re-render subscriptions are in place
• This prevents Uniwind methods from correctly notifying event dependencies
• The issue appears isolated to the execution order within getStyles

To reproduce:

1. Log at src/core/native/store.ts#L38
2. Log at src/components/native/useStyle.ts#L25
3. Log at src/core/listener.ts#L43
4. Log before you call eg. Uniwind.updateInsets

Snack or Repository Link

https://gist.github.com/divineniiquaye/cec774b3b6867769254ae75592b533c1

Uniwind version

1.2.2

React Native Version

0.81.5

Platforms

Android

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none

[Brentlok]

<SafeAreaListener
    onChange={({ insets }) => {
        console.log('Insets changed')
        Uniwind.updateInsets(insets)
    }}
>
    <View className="p-safe flex-1">
        <View className="flex-1 bg-red-500" />
    </View>
</SafeAreaListener>

I've tried to reproduce it. Execution order looks correctly for me, did I miss something?

[divineniiquaye]

@Brentlok I encountered the issue running expo go on real devices. The Resolved style is never called. Even if Insets changed is called multiple times, a Resolve style is supposed to be called.

Per my observation Subscribing to styles for rerender thus not register on android so even if I change the device orientation nothing happens compared to iOS where everything works smoothly.

[Brentlok]

Thanks, I'll try it on real android device

[Brentlok]

<SafeAreaListener
   onChange={({ insets }) => {
       console.log('Insets changed')
       Uniwind.updateInsets(insets)
   }}
>
   <View className="p-safe flex-1">
       <View className="flex-1 bg-red-500" />
   </View>
</SafeAreaListener>

This works correctly on the physical devices as well

[divineniiquaye]

<SafeAreaListener
onChange={({ insets }) => {
console.log('Insets changed')
Uniwind.updateInsets(insets)
}}

This works correctly on the physical devices as well

Never mind, I tested in on an Infinix X669 and Infinix HOT 30. It's reproducible on these devices, but worked on a Samsung device test. Most of the African population especially for Nigeria uses a lot of Infinix phones which is a very low end android device made from China.

I'll will just have to opt in to Uniwind Pro when available for best performance. Thanks for the time in looking into this

[Brentlok]

Never mind, I tested in on an Infinix X669 and Infinix HOT 30. It's reproducible on these devices, but worked on a Samsung device test.

That's weird, mounting components happens in react (js) so it shouldn't work differently between devices/platforms

[divineniiquaye]

Never mind, I tested in on an Infinix X669 and Infinix HOT 30. It's reproducible on these devices, but worked on a Samsung device test.

That's weird, mounting components happens in react (js) so it shouldn't work differently between devices/platforms

Well if you use any of the low end devices you be will be battling with the device than the code.

I use sentry on my production apps, but had to disable sentry replay cause it freezes those devices and on some crashes with errors looking like it failed to read a sentry file on device due to the devices poor performance nature.

An example is with Unistyles #1033 which was able to be reproducible but not resolved.