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.
Related
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.
i'm making an app for restaurant reservation and i made a fabric.js canvas that allows you to select a certain table, also the admin is capable of changing the tables and allocating them however i don't know how to integrate Fabric js with react native?
I know this question is two years old but I thought I'd add an answer for anyone else who may be looking at integrating fabric.js with react native (as I currently am).
Unfortunately, as fabric.js depends on a DOM (Document Object Model) & BOM (Browser Object Model) being present, it'll only work in a node or web browser environment; as there isn't any implementation or polyfill in any existing react native canvas library for these global objects. You can read more information about this on the following github issue.
Your other option is using a web view component to render a webpage, but the downside to this is that it doesn't offer quite the same experience as a native app.
I have found a p5 JS wrapper for react (react-p5-wrapper) . Is there any way to implement p5 in react native app too ?
I'm afraid there's no way at the moment.
I just checked the GitHub repo of p5.js and it uses DOM elements (like canvas) in its source code (for example https://github.com/processing/p5.js/blob/master/src/image/image.js).
React Native doesn't have a DOM, so that's not possible (except maybe using a WebView or jsdom, but what's the point using RN then?).
I think you'll have to wait till someone makes a fork especially for React Native.
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.
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