Reuse code between React.js and React Native applications

Question

I want to reuse some code that retrieves data from an API for two apps. One is an iOS app using React Native. The other one is a website using React.js.

I initially coded the class that retrieves data from an API when I built the iOS app. Thus, I used the fetch method available in React Native.

Unfortunately, there isn't such a method in React.js. My best option if I want to reuse my code is to abstract the call of the React Native's fetch method by creating a class HTTPRequests with a method fetch which will call the React Native's fetch method or the '$.get' method depending on the lib used by the project: React.js or React Native.

My question is the following: How can I detect the using of React.js or React Native in my project. My first idea is to detect if my JS code is executed through RCTRootView engine or a browser. But I've no idea how to accomplish this.

Any suggestion?

Thanks!

There are libraries that implement the fetch API in a browser, for example: github.com/github/fetch . — Mike Driver
– Mike Driver, Commented Jul 20, 2015 at 18:13

Yevgen Safronov · Accepted Answer · 2015-07-20 21:36:47Z

3

My suggestion would be to move shared logic into separate module (bower, npm, ES6), generalize the way you request data through fetch polyfill, and never ever bother with detecting React/React.native in your project. JS code detection will make your code unnecessary complicated and hard to support when new versions of React/React.native will come up.

answered Jul 20, 2015 at 21:36

Yevgen Safronov

4,0331 gold badge29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jean Lebrument Over a year ago

Yes you're right. I finally managed to not have to create two cases depending which library I'm using.

Andy B Over a year ago

I'm curious on how you created the shared files? You use browserify?

Yevgen Safronov Over a year ago

@AndyB my rule of thumb would be a separate npm package, you could even use local dependencies docs.npmjs.com/files/package.json#local-paths in your package.json with npm 2.0, I would also suggest linklocal package for development usage

Andy B Over a year ago

@EugeneSafronov, cheers!! I won't have any problems with the exports in the browser? I.e. module.exports = MyModuleName;

Yevgen Safronov Over a year ago

@AndyB in the browser you will need either browserify or webpack. They both understands node's export style or modules API (with use of babel)

|

Ihor Burlachenko · Accepted Answer · 2017-09-11 22:01:59Z

2

I have successful experience of building a cross-platform application with React and React Native using the platform-specific extensions feature of React Native. I've just described how I structured the code in order to achieve that in a blog post Code sharing between React and React Native applications

answered Sep 11, 2017 at 22:01

Ihor Burlachenko

4,9331 gold badge30 silver badges25 bronze badges

Collectives™ on Stack Overflow

Reuse code between React.js and React Native applications

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related