What is "native" and what is not in a React Native project?

Question

I'm still very confused on how React Native works. Maybe because I don't have a decent background on Mobile Development (I have tried native Android once or twice though).

If I'm not wrong, hybrid frameworks like Phonegap or Ionic will run the entire project (or most of it) in a 'WebView', am I wrong?

Whereas native frameworks such as React Native is meant to use native resources instead of purely web technology.

But we still write Javascript, and React Native does the job so quickly that it is probably still using the Javascript we just wrote (I mean, it's not parsing, translating to native code and recompiling).

The question that comes to my mind is, what exactly is a native resource and what is not in a React Native project? Where is the Javascript we write running if not in a 'webview'? There are native libraries that creates the interface of Javascript to Objective-C and Java for both platforms? In a web-solution it simply injects the entire code in the WebView?

Extra question : can we consider React Native an hybrid framework just because we write one code for many different platforms, or it is not the correct terminology?

Answer 1

If I'm not wrong, hybrid frameworks like Phonegap or Ionic will run the entire project (or most of it) in a 'WebView', am I wrong?

Yes. Phonegap and Ionic, which uses PhoneGap (actually Cordova) as part of the framework make use of HTML, CSS and JavaScript to render the UI. The only connection (as far as I know) outside of that is the access that Cordova provides to the native APIs of the device (think sensors, for instance).

Whereas native frameworks such as React Native is meant to use native resources instead of purely web technology.

Yes, the approach of RN is to enable developers to use JavaScript and the React framework while retaining the benefits of native development (performance, feel-and-look, etc).

But we still write Javascript, and React Native does the job so quickly that it is probably still using the Javascript we just wrote (I mean, it's not parsing, translating to native code and recompiling).

Here is where I think your misunderstanding lies: you have to think of React Native as a 'bridge' between a native application that still relies on the iOS/Android/Windows native APIs and a JavaScript piece of code. The bridge grants JS access to such APIs, and cares about rendering the UI and other different native aspects, as well as providing data in the opposite direction (from Native to JS). The JS code is never 'converted' to say Java or Swift/Obj-C. It is executed in the same way you program it. However, you have the possibility of asking RN to use some native component from JavaScript (say, a <Text> will instantiate a UILabel in iOS)). The library then implements this approach with a handful of components, like layouts, views, controls and so on, but the essentials remain as described.

The question that comes to my mind is, what exactly is a native resource and what is not in a React Native project?

So... basically, anything that is written in JavaScript will not be native, but through its execution you get native components. Anything that you program using the native API directly (that is one of the strengths of RN, that you can still develop natively if you feel up to it or a certain native component is not implemented in the library) can be considered 'native'.

Where is the Javascript we write running if not in a 'webview'? There are native libraries that creates the interface of Javascript to Objective-C and Java for both platforms?

As explained before, the React Native is the interface between JS and Objective-C. The JavaScript is not rendered in a WebView at any time.

In a web-solution it simply injects the entire code in the WebView?

React Native is not meant for the web... unless you use this.

Extra question : can we consider React Native an hybrid framework just because we write one code for many different platforms, or it is not the correct terminology?

Well... I'd say that a hybrid framework is a tool that combines different development resources (say web technologies and native APIs). In that case, React Native would fall in the category. I would not call it hybrid just because it works in several platforms (that I would simply call multi-platform).