Expo 51 and React Native 0.74 issues

[dhruv-00]

Description

On initial load insets value is fine but when reloading through dev menu insets value is not correct it updates after hot reload. Device width height is not updated dynamically. When going in setting and changing device size doesn't reflect instantly but after killing and restarting the app

Steps to reproduce

1. create new app with expo 51 and react native 0.74
2. initiate unistyles and log the value of insets and runtime width and height
3. after dev menu reload or device size change it will not be updated
4. check videos for the more explanation

Snack or a link to a repository (optional)

No response

Unistyles version

2.7.2

React Native version

0.74.1

Platforms

Android

Engine

Hermes

Architecture

Paper (old)

[dhruv-00]

https://github.com/jpudysz/react-native-unistyles/assets/86352938/44a983c5-0671-4954-aa38-40d44acb5bee

https://github.com/jpudysz/react-native-unistyles/assets/86352938/393524b0-6752-46cb-a869-e1366813a290

[dhruv-00]

while creating a reproducible repo I found out that initially insets value is not correct if not re rendered

[dhruv-00]

repro https://github.com/dhruv-00/unistyles-repro

[jpudysz]

Thanks for report and repro, will try to debug it

[oscklm]

Hey just wanted to ask, if there is a chance this could be related to an issue with delay on orientation that i'm trying to troubleshoot?

I'm also on Expo SDK 51, and using unistyles 2.7.2

https://github.com/jpudysz/react-native-unistyles/assets/22825865/451a1da8-f72e-491c-abca-86e9d0f6cef7

[jpudysz]

No way that's happening on iOS 😦. Im also building iPad app and didn't encounter such issue. Can you share the code?

[oscklm]

Hey. I've not been able to troubleshoot it fully yet.

I have tried a bunch of things, seeing if i could make some render optimisations, but no matter what the issue still occurs. I have a slight feeling it might be related to tabs navigation. Seems when to happen less on small screens that have less to re-render, which makes sense. So maybe my issue have nothing to do with unistyles. Again can say for sure yet.

Id be happy to share access private to our code base, in case it could help determine if unistyles is related to this.

[jpudysz]

Please do, you can invite me.

I will debug it, and later test it against new beta 🙏

[jpudysz]

Hey @dhruv-00 !

Here is reproduction and fix to your report:

1. Unistyles 2.7.2

https://github.com/jpudysz/react-native-unistyles/assets/9088288/3c8690fd-dd83-4946-a012-7cab7a475079

2. Unistyles 2.8.0-beta.3

https://github.com/jpudysz/react-native-unistyles/assets/9088288/42c01172-fc4e-49bb-a7a7-551e9ee2c31f

When it comes to When going in setting and changing device size doesn't reflect instantly but after killing and restarting the app - i think it's not the bug. Unistyles Runtime reports correct width and height (your screen size didn't change, just the content inseide). So, please double check your styles as you define content within the screen.

If you think it's still Unistyles issue then please feel free to share the demo 🙏

[dhruv-00]

hey @jpudysz I've checked the beta and it is working fine and about the device resizing I think unistyles should be reactive in terms of layout also because it can colors in realtime so it should also change device's layout also

[jpudysz]

@dhruv-00 it shoud, but still what's the issue? I simply don't understand it. You changed screen size, and your content did expand out of the screen.

UnistylesRuntime reports same screen size, because nothing changed (your app fill entire screen). Did you bound screen size to container styles? How can I repro it? I'm willing to help, but I'm not sure what are your styles and what are you doing with this container.

[dhruv-00]

so I design according to figma where default screen width is 360 and if there is a box with width 100 and height 100 it will be different in a device with width of 320 and 420 and 100 in 360 to determine that I use a variable of 1/360

I've a function scale(value: number = 10) { const threshold = 1/360 return value * threshold * UnistylesRuntime.screen.width; },

so in this case the screen width should also change but it doesn't

let me update the repro example

[jpudysz]

Cool, thanks for the demo!

[dhruv-00]

I've updated the example https://github.com/dhruv-00/unistyles-repro

this is how I use unistyles in all my projects

[jpudysz]

@dhruv-00 It was all about making the screen pixel density dynamic. I used to read it only once while creating the unistyles instance.

I included a fix in version 2.8.0-beta.4. I will keep this issue open until I release the stable version. Thanks for the demos!

[dhruvpvx]

@jpudysz awesome it is working as expected 🥳 nice work 👍🏽

[dhruvpvx]

I'm updating my main project with beta.4 until the stable release. I'll keep updating in the same thread if I face any issues.

[jpudysz]

I’ve just released version 2.8.0-rc.1 with a complete implementation for iOS and Android. I believe all the reported issues have been addressed.

If not, please reopen the task 🙏