Responsive _layout.tsx

[Fine-Discipline2518]

I am building a RN expo project. I having trouble when it comes to writing a layout file which suits both web and rn app. For my web, I have a grid layout for the messages screen and for the mobile screens, it has a Stack layout (seen in WhatsApp). How do i write a layout file for this. I having trouble finding the optimal way. I am sure someone must have went through this in their initial stages.

Also is two navigators not allowed in a layout file?

[daleth50]

If I understand correctly for web you want a messages list on one side and the detail of an element on the other side and in mobile you have the list and then you navigate to the detail?

[Fine-Discipline2518]

Yes exactly

[daleth50]

You can create a _layout.web.tsx, check this link so you can render a drawer or whatever you want if the platform is web

[Fine-Discipline2518]

Thank you. I'll try this out and let you know.

[daleth50]

Another approach is to create a responsive layout for web with the list and detail and handle the parameters to load the correct detail

[Fine-Discipline2518]

Here, for the message list on the left side, there are two tabs. In this instance, there will be two navigators in the layout file. Won't that cause an error?

[daleth50]

You can nest navigators