79443777

Date: 2025-02-16 19:16:26
Score: 0.5
Natty:
Report link

If you are using <Stack.Screen ...> (in 2025), this may solve your issue

Scenario - Inside the directory where you app.tsx (or) app directory is located, suppose you have sub-directories, which are for different groups / sub tasks for your app (ex - app/auth/otp-handling.tsx). Each such directory will have its own _layout.tsx, in which we typically have the settings for the header, which is local to the directory. Lets say you are developing / testing the otp-handling.tsx, so to do that you may have imported that component directly into your app.tsx (the mistake which I had done). And the header styles were not applied, despite mentioning then clearly in the Stack.Screen in _layout.tsx. Here when you import a component which is under a subdir with its own _layout.tsx, into app.tsx, it (otp-handling.tsx, say) would follow the _layout.tsx of the app directory (outer one). Hence instead of importing it, use 'useRouter' from expo-router and do router.push('/auth/otp-handling'), it will work, as the otp-handling.tsx will now follow _layout.tsx of the auth directory.

Note - do that router.push in a useEffect, in a set timeout (1000ms) Believe me, it works!

Reasons:
  • Long answer (-1):
  • No code block (0.5):
  • Low reputation (1):
Posted by: Chirag G. Shetty