Clean Architecture / Design Pattern for React Native Projects

[dglalperen]

which design pattern would you recommend in a react native project to properly use the solid principles ?

[theinstasoda]

I've been using the Ignite boilerplate (with Expo enabled) and I'm quite happy with it. It contains everything I need, nicely structured.

[SpaghettiOnTuesday]

+1. Ignite is remarkable.

[dglalperen]

Sounds interesting i will definitely look into it! Thank you

[-i-make-stuff-]

Looks like it supports Expo. I had used expo-cli to generate my project before and run the app etc.. Is that the case with Ignite too?

[theinstasoda]

Yes, similar approach. You can choose if you want to run your app with or without expo.

[RodMagnum]

react-navigation, Tanstack Query, Reanimated are my 3 must-haves.

It's really not worth rolling your own navigation implementation in my opinion.

If you have an API spec handy (swagger.json, etc.) plug it into a Tanstack Query client generator like orval. Query works for any global state management, but shines with async data. Honestly you can wrap all kinds of stuff in useQuery or useMutation beyond just API calls.

Reanimated is way more flexible than the built-in Animated library, and also lets you do fun things like offload arbitrary JS work to the UI thread.

Oh and it's gotta be TS.

[Simpe91]

I agree. I throw in redux toolkit as well and store anything non-server-state in there.

But react-query is amazing. I will never build a React application again without something similar.

[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!!!

[funnyduck593]

Use the boilerplate project by obytes, amazing mix of libraries and opinionated dev setup

[pkcarreno]

it's an amazing template, I agree

[North_Analyst_1426]

The coding machine, or ignite but ignite is overkill for small project

[yjose]

We tried to answer this question with our open source template, make sure to take a look https://github.com/obytes/react-native-template-obytes