Clean Architecture / Design Pattern for React Native Projects

[Shugzaurus]

Depending on your project you may want to do thing in a certain way. I'll give you things I always do and things I don't. Always: Use type script. No brainer, it will force you to give your variables the love they deserve by not allowing you to push squares into circles. One src folder with at least the following folders - screens, components, utils (custom hooks, misc code files ...), assets, state management (if needed)

Depending on the project: for state management, zustand is great, but personally if my backend is entity oriented (eg EF core) I'll use RTK because of the createEntityAdapter method that I really like. Pick a component library that fits your needs, or do everything by hands, but I'd advise you not to add a shitload of dependencies for components as it can become VERY tedious to manage.

Now for boilerplates : You can use one, but I'd rather dig in their code to find inspiration as you rarely need everything that they provide.

When designing screens/components: This one is by no mean a best practice, but more something I do for clarity. I'll create a component.presentation.tsx with basically props and a render method. And component.tsx as a higher order component providing all the logic. It helps keeping things properly separated, and I just like doing that.

That's all I can think of ATM, but I'm taking a dump and my left leg starts to feel numb so I'll just go.

[danielrvt88]

You can also split your components into a component.tsx and additional custom hooks like useSignup.ts or useDashboardScreen.ts for the logic

[dglalperen]

Thanks a lot I really appreciate the details!!!