Best solution to share code between 2 separate projects React Js and React Native? ( like redux store)

Question

For a project, we need to have a Website and a mobile App (not a responsive Website) that both will consume my API. I used to work with React so I've checked a lot about React-Native for the mobile App part.

As I may understand, this require to create 2 distincts projects and it seems more efficient to do so (furthermore if these 2 projects don't share the same client). The problem is that, at a first look, both will use the same store... I don't want to dupplicate my store neither update both of them each time I update my API... The only difference I see between my React Website and my React Native App is the way they render. They will both have same functionalities. Can we go further by hypothesis that they will also share the same containers?

I try to open an issue on the github but they redirect me here to discuss about it.

So I want to know if you guys have THE best solution (clean & without bad surprises) to share code between React and React Native? If so, a tutorial will be very appreciate.

(Note: Searches were very time-consuming, React Native documentation should reserve a section about this subject...)

Answer 1

This was answered in this thread.

The overall idea is to have different entrypoints for each platform, and have the platform specific code (React for web and React Native for mobile) share common code like the Redux store.

An in-depth article can also be found in the thread I linked.

That being said, there are a number of tradeoffs and pitfalls to this idea one of them being dependency management, as you can see by this comment from the linked article:

I've just learned the shortcoming of this structure. By sharing a common package.json between native and web, you've glued them together by their common dependencies, the most important one being react. Let's say you upgrade to a version of react-native that depends on >= react@16, but your web app depends on some other library which depends on =< react@15. This exact thing has just happened to me, and I'm not finding an easy way out.

Another viable approach would be to transform the common areas of code into libraries you can export and import them to each separate project (mobile and web). That way you avoid the problems with the first option, but now you still have to maintain and update two separate code repos.

To answer your question the comments: I don't think there's anything wrong with having one project sharing code for both platforms, but it has to be planned very carefully so you won't break both your projects when trying to add new things. Try to start by planning your project structure so there's clear separation between web and mobile code and check if your dependencies are compatible with one another.

Here's a blog post that has an example project that should help you with designing your project.

EDIT: You could try React Native Web, but that's still in alpha so I wouldn't recommend it for work related projects (should be ok for school/personal projects though).