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!
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.
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
Related
I currently have separate libs for React and React-native, is there any way to have the same library working on both platforms. Foe example, is there a way to use react-native web on normal react project?
(I am considering code sharing but other than that I did not found anything useful on the net.)
as I understand Expo or Codepush OTA is for updating React Native (RN) apps without going through app submission. The reason it's possible is because a RN app has 2 parts:
UI: built-in RN components (View, Text...) will be converted to native UI widgets/components (UIView, android.view...). Basically our UI is native.
Logic: written in Javascript and cannot be converted to native code. We have to embed a JS Runtime (JavascriptCore, Hermes) to our native app to read and execute JS.
OTA only updates the JS code and cannot update native code.
However, recently I just did an OTA update to add some new features (new screens, new components) and it worked totally fine. I couldn't understand this. Didn't I modify the native code by adding new screens? Does this mean I understand the UI part wrong and our UI is not native but web view?
Hope you guys can help me answer this. Thank you!
Didn't I modify the native code by adding new screens?
No, you didn't modify the native codebase. You modified only the JavaScript codebase unless you add a new library that uses native code.
Does this mean I understand the UI part wrong and our UI is not native
but web view?
React Native UI is native and not webview. For example, you used components like View, Text, etc from react-native. It invokes native code and create new instances of Views with different params. While you creating new JavaScript code native code stays the same.
In other words with your on air update you created new invokes of native code. But this native code is same as it was when you submit it in the store.
So I am creating a React native app and I want to call a JavaScript function from the native part of the App.
I know that I can use Native Modules to create a bridge between Native and React Native and I also know that from a Native Module I can emit an event that can be received by React Native.
But, any function call inside a Native Module can only occur from inside the React Native itself, since it needs a React native context, so I can only send an event from a Native Module if the React Native itself calls one of the Native module functions that contains the event emit. Can someone clarify how can I do this?
To be more clear, my final goal is to create an Android library using React native that will be used in an already created Native app, inside my Android Library I want to expose some of my JavaScript components/functions so I can have Native App -> Native part of React Native library -> JavaScript part of React Native library.
Thanks in advance!
You can use HeadlessJs for it. React-Native already provides it.Here you can see the example of HeadlessJs follow below link
https://facebook.github.io/react-native/docs/headless-js-android
It will help you.
Have a great day.
As we're building a Meteor React web application which will be presented inside a web view inside a react native application. As you can probably tell by reading that sentence, this doesn't make much sense, but due to time constraints and the fact that the react native application is made by another team, we have decided to present it in a web view for now, and eventually convert it to RN as well.
So to prevent having to write everything twice, is there a way to use React Native components in Meteor? (So use <View> for example instead of <div>).
If you want to go down this path, you can use react-native-web to build React Native components for the web.
Just want to warn that while building your web client with RN components will definitely help you transition, you will still pretty much have to scrap all your client side Meteor logic when you transition later. The best RN meteor client currently is react-native-meteor and is more of a proof of concept than anything -- trying to emulate key features of Meteor with a wrapper using a DDP client, but definitely not there yet.
So in the end, you're going to put in some serious hours making the conversion later or scrapping Meteor altogether when you go full native. If you're a fan of Meteor, I would suggest trying apollo made by the folks at Meteor and works out of the box with RN. You can still get all the best features of Meteor like reactive data, optimistic UI, subscriptions, etc. and the learning curve is pretty mild.
I am new to React JS. I am trying to build a web application which should also work on mobile (Android and IOS) so thought of using react js for web application and created few components. so is it possible to use the React js component in React native.
It's good that you plan in advance. 100% matching between JS and Native won't be possible, but with careful planning, you could get to reuse a good deal.
You may want to take a look at React Native Web project that mirrors Native-specific components for Web (e.g. View, Image, Text, etc).
I suggest building a simple prototype in React JS and then in React Native so you get some understanding of the differences in the two ecosystems. Having a hands on experience will prove more beneficial than any writeup :)
ReactNative is a set of real native Components like View, TextInput TouchableHighlight and more. It is also a platform which let you run javascript code to control these.
There is no WebView like in Cordova, what you get is a native App with native views.
But that means, that you can still have some or your domain logic written in JS which you can use the same way in your Web App.
For example you have a Login Screen for iOS, but all the necessary stuff for your server calls, can go into a separate module e.g. api/auth.js, which is shareable between web, ios, android, iot.. what ever.