Use existing WebView JavascriptInterface with React-Native - javascript

Can I use existent javascript interface, currently attached to the WebView in my android and iOS projects, within React-Native app?
React-Native does not use WebView for itself to run. But I can create it React WebView. My question is about using existing javascript interface, perhabs attach it to the created in React-Native WebView, make some sort of React extension etc...
BACKGROUND:
I have several android and ios applications made using WebView. For WebView there is a javascript interface (same for all apps), that I use to access native device environment features (like Cordova/Phonegap) and third party SDKs and libraries (one o them is an SDK for Augmented Reality), so my javascript "bridge" handle all those API calls.
Every single app is made then within WebView environment (here I can use a variety of js libraries and frameworks like AngulerJS, JQuery etc...). My apps look like a transparent html body, camera image behind it with augmented reality 3d scene (3d models and 3d interfaces), other html views used for texts, images, lists, forms, popups, dialogs and so on.
This stack i quite solid and i made a lot of apps with it.
Then I found React-Native and i thought about realizing the "2D" part (that was always made in HTML) using native mobile components. So the question is: is it even possible to use my javascript "bridge" in React-Native context? I mean this "bridge" is attached to the WebView, what if I could transform it somehow to use with React-Native?

No, you can't. React Native does not use WebViews under the hood but normal iOS / Android UI Components.

Related

How to integrate Fabric js with React native?

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.

Does flutter uses Javascript Engine kind of thing like React Native

As we know React Native uses Javascript to create native views without DOM at runtime.
Does Flutter uses same kind of logic?
No, Flutter uses Dart compiled to native binary code. There is no JavaScript involved at all.
You can run JavaScript in a WebView plugin if you want.
Flutter builds to native binary code and renders the UI using Skia Graphics Library which is a high performance 2D graphics library that utilizes GPUs
Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and Firefox OS, and many other products.
Flutter uses its own widgets that are built from ground up in Dart.
Basic widgets like gesture detection, layout, text rendering, ... are composed to more powerful reusable widgets like Material Design widgets and others.
All these widgets can be reused to compose custom widgets.
The source of all these basic and complex widgets is available and can be used to allow a level of customization composition alone might not allow.
In Addition to #Günter Zöchbauer:
Flutter has beautiful sets of Widgets
It is easy to understand as compared to ReactNative
ReactNative has a difficult learning curve for mobile developers
Flutter is being used to build a new OS by Google called Google Fuchsia
You can also read this article.

How to reuse the React JS component in 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.

Integrate one visualisation from d3.js in an android application

I want to develop an android application which is to integrate a visualization from d3.js. Is it possible? Can anyone explain how to do this.
D3 is a library geared towards manipulating data and rendering it into an html DOM –– either via SVG, or straight up divs or perhaps a canvas. Of course there also needs to be a JavaScript engine that can run the code. Browsers provide all those things; native apps provide none of them out of the box.
However, there are ways to build native apps that wrap a javascript engine and DOM. PhoneGap is a commonly used framework for doing so. It essentially lets you develop as if things are going to run in a browser, but they're packaged into a native app. There's a performance hit to that: It won't run as fast as a native app, and often not even as fast as the same code would run in a mobile browser. But from the user's perspective, it's installed and launched just like any native app.
That's AFAIK the only way to use d3 in a native app.

How to create iPad application that reuses my JS libraries that are build for web application

So I am a web (Rails) developer, and I would like to create an iPad application for my site. The web application heavily relys on javascript libraries that are built specifically to interact with users in a unique manner.
Now I would like to transform that same interaction to my iPad application. I need a way to reuse my js files since re-coding the libraries will take forever. There are three options that I might follow:
1- Using Rhodes: built on ruby and inspired from rails.
2- PhoneGap: which is basically a web browser inside an app, so I presume that including js files would be possible.
3- xCode: which will take lot of time for me to learn and implement.
My questions are:
1- Can I import my js files in the rhodes project?
2- Which is the best to implement this?
3- Is there any other options that I should be looking at?
Any hints and pointers will be greatly appreciated,
Thanks a lot everybody
As i am not aware of the app you are developing & its design, Two approaches i see here as it is Rails,
Mobile Web
The existing web app shall be customized to mobile web (iPad & most
of the tablet in fact).
Create controllers specific to mobile/tablet. this shall connect to views created specific to mobile/tablet.
Detect the device/platform when HTTP request is posted and re-direct to specific views you have created.
Good thing is your JS is always the same(will need minor modifications thou) and dev time reduced significantly without learning new stuffs.
PhoneGap
You can pull up all the JS you have written and build some html/css integrate everything and build the project inside a phonegap template for iOS and create a on-device app and distribute. but the JS will undergo some changes here too.
But this will no way be different than mobile web and this comes other overheads like CORS and build/release, updates management & app stores etc.
Native APP
As you said, you got to learn iOS development (objC). you can create RESTful services in your rails end and expose them to the iOS app.
Rhodes i am not very sure, its little tricky and it depends on your existing web app too. try it before deploying.

Categories

Resources