Is it possible to setup a project which has code for both React Native(Mobile app) + React(web), having the code shred between platforms except for the UI part.
Have done something similar with Angular + NativeScript using this seed, which enables code sharing between native app and web application(Except for the UI layer). Looking for something similar for React + React Native.
Please share if you know any such seed for React Native + Angular as well, if available.
Jonathan Kaufman has a good article on how to set this up: http://jkaufman.io/react-web-native-codesharing/
The basic strategy is to have a different entry point (index.js) for each platform (android/ios/web). Then the majority of your non-rendering code can live in a shared app
or common
folder. You'll still need to segregate your rendering code (i.e. uses of View
, div
, etc.), though, as that will differ by platform.
Pay attention to the comments on that article as well, as there's some good discussion on the pitfalls of this approach. Example:
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. --timtas
You can give a try to React-Native-Web, but imho you should create 2 different projects, isolate and copy what can be used on both (like api requests and util functions). Your code will be easier to debug and maintain.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With