Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native + React (for web) seed project

Tags:

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.

like image 542
Anand Avatar asked Feb 02 '18 21:02

Anand


2 Answers

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

like image 191
Luke Willis Avatar answered Sep 28 '22 02:09

Luke Willis


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.

like image 23
Dyo Avatar answered Sep 28 '22 01:09

Dyo