Input component with state causes render error on iOS

[tommy141x]

Description

Using states to style the input component on mobile causes a render error with NavigationStateContext, specifically:

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?
This error is located at:
     in CssInterop.unknown
          in Unknown (created by InputField)
               in InputField (created by Input)

Repo Link

https://github.com/tommy141x/chatly/tree/gluestack-bug

Steps to reproduce

1. Clone repo (gluestack-bug) branch
2. Go into the chatly-client folder
3. Run bun install
4. Start expo with bunx expo start
5. Open the app on mobile and press the login button to trigger render error

gluestack-ui Version

0.7.5

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [X] iOS

Additional Information

While this could reveal some issue with Expo Router, doing this same thing elsewhere on other components functions properly, and I found that commenting out the Input component with the state styling in it will resolve the crash.

Code that triggers the crash:

<Input className={`rounded-xl p-1 !border-2 ${error ? "border-none !ring-2" : ""}`} />

Edit:

I also found that the crash can be triggered without states, simply change the styling manually and save, hot refresh will trigger the crash on iOS as well.

[rajat693]

hi @tommy141x thanks for reporting the issue. We will have a look.

[sra1kumar-NULL]

Hey @tommy141x , I've checked the repo this, That you've provided the issue is not due to the conditional styling in input , that is due to the wrong way of styling. ie.., ring-2 will not work on native it will only work on web. Please check this for knowing more about these compatability from nativewind. Please use these stylings web only , web:ring-2 this will not break on native.