React-native-web: Sharing components between react-native and react-native-web

[dave-irvine]

This is more of a community question than a particular issue with react-native-web, but I'm trying to work out how to created "shared" components that I can use in both a react-native and a react-native-web project.

Let's imagine a structure like this:

"react_native_project"
"react_native_web_project"
"shared_components"

shared_components contains, for example, a Button that I wish to use in both my react_native_project and my react_native_web_project.

shared_components can be compiled, but it cannot use babel-plugin-react-native-web, otherwise the compiled code refers to react-native-web and now we cannot use the components in react_native_project.

So what we really want is in react_native_web_project to use babel-plugin-react-native-web or some other method to resolve react-native to react-native-web. Currently I can't get this to work and I'm not sure where I'm going wrong.

Does anyone have any examples of sharing components between a react-native and react-native-web project?

I feel like shared_components could maybe compile two versions, one for react-native and one for react-native-web, which I'm happy to do but don't know how to achieve it, how would you tell react_native_project and react_native_web_project which compiled version to pull in?

[MoOx]

For my concern, I don't compiled my shared components. I didn't organize my project this way but instead

• android (default react-native)
• ios (default react-native)
• src (my actual js code)
  
  
  
  • components
  
  
  • web (mostly router (react-router in my case)
  
  
  • native (same, router (react-navigation in my case)
  
  
• index.android.js (consume src/native/index)
• index.ios.js (consume src/native/index)
• index.web.js (consume src/web/index)
• webpack.config.js (web only, specify index.web.js as the entry point)

What you can do is specify the babel config plugin required from webpack config and use the common config in babelrc.

I never pre-compile anything and let the normal (dev/build) process does the entire compilation.

[dave-irvine]

Thanks for your reply @MoOx. I think your layout would work, but only when your react-native and react-native-web projects are both in the same directory.

For me, the react-native and react-native-web projects need to be very separate, lets assume they show completely different things, for example react-native is a Weather app and react-native-web is a News app, I just want to share common components between the two.

Once you split the shared components out to a separate directory or package, webpack and babel in either the react-native or react-native-web projects don't seem to be able to affect the code as you import it from shared components.

[MoOx]

React native consume es6 code, and babel (via metro bundler) handles it (as a proof, most react-native package on npm are served as raw es6, non transpiled).

For RNW code, you can transform anything you want as soon as your webpack config (if that's what you are using) is properly setup. I don't see any blocker with what you want. You may have misconfigured something.

[dave-irvine]

Aha! I have a solution (and I will do a blog post with examples so I don't forget it!).

For some reason if you add react-native-web as a dependency of shared_components, the error in react_native_web_project of being unable to resolve react-native in shared_components goes away.

This makes me think that some misconfiguration as you have said @MoOx is preventing shared_components from using the react-native-web from react_native_web_project.

So I have a workaround at least but I think something is configured wrong still.

[necolas]

What MoOx said. Read the getting started guide section on react native too. You probably need to tell webpack to run Babel over the directory containing your shared components. Packages shouldn't use the RNW Babel plugin, it's for app bundling

[bala-compassites]

@MoOx
Could you elaborate or share example about configuring navigation on both native and web? I would love to see an example of this! It would be super helpful. Thank you!!

web (mostly router (react-router in my case)
native (same, router (react-navigation in my case)

[MoOx]

I just use 2 differents entry points for web and native, use differents routing system (so different files & patterns) and reuse only lower level components. I don't have anything public yet to share.