UI brake in release mode IOS

[gulsher7]

Description

When I am uploading my release build to TestFlight, my UI is breaking as shown in the video below. I don't understand what the issue is. Please help?.

I have attached two videos one is debug build and another is release build. In debug build my ui is render perfectly but in release its brake.

Note: If I install the app for the first time or install a new version, the UI renders well. However, after some time, when I reopen the app, the UI starts breaking again and continues to break repeatedly.

unistyles.ts Configuration

import { UnistylesRegistry } from "react-native-unistyles";
import breakpoints from "./breakpoints";
import { lightTheme, darkTheme } from "./themes";

type AppBreakpoints = typeof breakpoints;
type AppThemes = {
  light: typeof lightTheme;
  dark: typeof darkTheme;
};

declare module "react-native-unistyles" {
  export interface UnistylesBreakpoints extends AppBreakpoints {}
  export interface UnistylesThemes extends AppThemes {}
}

UnistylesRegistry.addBreakpoints(breakpoints)
  .addThemes({
    light: lightTheme,
    dark: darkTheme,
  })
  .addConfig({
    initialTheme: 'light',
  });

Release Build Video

https://github.com/user-attachments/assets/cc8a486a-d994-4eff-9beb-e014ec2b3898

Debug Build Video

https://github.com/user-attachments/assets/1d1fdee8-2a78-4596-b11b-cb9a6d21577f

Steps to reproduce

1. Installed the release build first time. The UI render perfectly.
2. Open the app later it will break the UI.

Snack or a link to a repository (optional)

No response

Unistyles version

2.8.4

React Native version

0.74.2

Platforms

iOS

Engine

Hermes

Architecture

Paper (old)

[jpudysz]

Hey, I also don't know what the issue is. It seems that some kind of paddings/ margins are squashed. How do you compute them?

What about the Android? Try to isolate the issue because from the video we can only guess

[gulsher7]

Hey, it's working fine in android. Issue occurs only in iOS release build.

[gulsher7]

Hey @jpudysz ,

I had created a function called moderateScale using the width and height from UnistyleRuntime.screen to give height to a component.

When I commented out Unistyle.Runtime.screen and used Dimension.get('screen') instead to get the height and width, my issue was resolved. I'm not sure what the reason might be, but following the above steps fixed my issue. I attached the screen short below.

Findings: Unistyle.Runtime.screen ==>>>> this is the reason for me to brake my ios app Ui in release mode.

[jpudysz]

Thanks for more details. Let me know if you can build small repro. I'm currently OOO until next Monday. I will pick it up when I'm back.

[gulsher7]

Hey, I have created a boilerplate for react native. I integrated this library in this boilerplate. We are using this template for our production app.

Here is the link: https://github.com/CodeBrewLabs7/BrewRNKit

[jpudysz]

Cool! Thank you

[jpudysz]

Hey @gulsher7 can you try to:

• upgrade version to 2.9.0 and add following line to scaling.ts:

import { UnistylesRuntime } from "react-native-unistyles";

export const { width, height } = UnistylesRuntime.screen;

+alert(`width: ${width}, height: ${height}`);

can you see width and height reported as 0?

[gulsher7]

Hey, Sure i will check tomorrow and will update you.

[gulsher7]

can you see width and height reported as 0?

I just checked and yes width and height coming 0.

 "react-native-unistyles": "^2.9.0",

Some time it's gave value and some time it's gave 0.

Screenshort attached below

[jpudysz]

Ok, that's what I thought 🙏 There is some kind of race condition and sometimes it is initialized immediately and sometimes not.

Thanks for debugging and checking it out. In order to patch it quickly you can reference width in your function instead of reading value on top of the file.

I will try to fix it tomorrow. Will keep you updated.

[jpudysz]

Fix has been released in 2.9.1 🙏🏼

[gulsher7]

thanks 👌

[efstathiosntonas]

@jpudysz I have a hunch that this is affecting version 2.7.1 somehow, is there a chance you can backport this?

[jpudysz]

Did it work for 2.9.1 though? v. 2.7.2 and 2.9.1 have a different initialization methods. Version 2.7.1 was constructed with initial values, but version 2.8.0+ is lazy loading the values. With this patch I'm awaiting the initial values, so it mimics versions sub 2.8.0.

BrewRNKit repro had Unistyles 2.5.0. So i really need some kind of reproduction to track it better.

[efstathiosntonas]

I really can't tell if it works on 2.9.1

I got some users complaining that the whole app ui moves to the top and only 20-30 pixels are shown. of the bottom part of the app. It happens on certain screens though, not everywhere, at least to my knowledge.

[efstathiosntonas]

this is the issue

Click me


[jpudysz]

whats your stylesheet for this view, what are you accessing from rt?

[efstathiosntonas]

@jpudysz will send you on discord, don't want to pollute this possibly unrelated issue