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.
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.
React Native is single-threaded. So, In its rendering rather than have multiple processes occur at the same time (multithreading), other components have to wait when one component is being rendered. How can we handle the multithreading limitations in react-native?
Is there anyone? who has the sample code? If someone did this before.
This can be achieved using maintainable extensions, it handles multithreading in React Native App. An extension lets you provide an app with custom functionality that it would otherwise not have. It can be built using Java, Swift or Objective C. Example of maintainable extensions creating a bridge between React Native and Native Components. I hope it explains a bit.
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