Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Can someone explain how react native works?
Found a lot of good articles about getting started, components usage, exporting modules.. but,
Googling about how react native works doesn't really help, but this article http://tadeuzagallo.com/blog/react-native-bridge that explains how native modules are exported and what happens when javascript calls them.
.. Still I find it difficult to understand (as a javascript dev) things like,
how first render happens on the screen, what are the functions of those 3 threads and how they communicate with each other, what is this javascript event loop, why do we need batched calls and how it is batched, etc..,
Can someone share an article/explain it in a javascript developer perspective?
thanks!
I will try to describe how React Native works. It's a bit complicated.
And first of all I will like to recommend this URL to learn about basics internal mechanism of React Native:
Read: https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html
So you are writing code in JS/JSX (JavaScript) or TS/TSX (TypeScript) but Android uses primarily Java (for sake of this answer, we know it's Kotlin now) and iOS use Swift/Objective-C so how the java script code is running in your Java Virtual Machine or Dalvik Virtual Machine or whatever iOS use.
So here is the problem how to run JavaScript code in Android Machine (iOS machine),
1) Use WebView, but WebView is slow, there is a lot going on in a WebView, so much heavy lifting is done for you by the Android/IOS Machine to run Web Pages in your application. Page loads slowly, scrolling jerks and what not. That's why Cordova and PhoneGap apps don't work well.
2) We don't need WebView right, we need light-weight JavaScript compiler(interpreters) which can compile only a set of JS instructions not all of them. A program which targets only core JavaScript and read new defined XML/ReactNative tags. React-Native tags (Image, FlatList, Text etc) are converted on JS side and converted to JS methods calls not on Android/IOS side.
Read: https://reactjs.org/docs/react-without-jsx.html
JSX is first converted to JS first.
3) Here, JavaScript-Virtual Machine comes into play which is completely different from JVM or DVM. And can run on JVM or DVM.
React Native uses : JavaScriptCore
Read: https://www.raywenderlich.com/1227-javascriptcore-tutorial-for-ios-getting-started (This is for IOS)
Here is one and open source for you to look around
https://github.com/LiquidPlayer/LiquidCore: This is even contains a file system, react-native does not.
Note: Same idea FB used for NodeJs = backend JavaScript.
4) JS-Bundle: So now you can run JS code in your application, but how do you ship it. You will create one file i.e merge of the all the files and library files into one and call it JS-Bundle.
Simple command for Android
node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform android --bundle-output ../jsbundle/index.android.jsbundle --assets-dest ../jsbundle/res
5) JS-Bridge: Like the name provides bridge methods and components to communicate JavaScript and Native-Code(Android Java). How do they communicate, like everything else in React-Native, using JSON. JSON commands are sent to UiManager in native code to create UI on an asynchronous thread, which adds these commands into MessageQueue and process them.
Read: https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8
Also Read : https://tadeuzagallo.com/blog/react-native-bridge/
6) Threads:
JS-Thread : Handles UI commands as explained earlier. JS thread is
created as soon you invoke React-Native view from Android Code (Starting React Activity) and handles every view create or change command from React Native.
Native-Thread(Main Thread): Take press or touch events and pass them to JS-VM,
JS-VM passes them to your code, if success , process them and View change events are passed to your JS-Thread.
Async-Threads Now I don't have much idea about how do you create threads inside your JS/JSX code. Maybe it's possible but before it was not.
So for a JS point view your writing JS code that will run on light weight browser that is ReactView.
Read: https://www.codementor.io/#saketkumar95/how-react-native-works-mhjo4k6f3
Related
I wanted to know that when a package or library is updated in futter ,we have to manually update the version name in pubspec file. but I want to do this without even updating the app which on play store or app store. I just want to update the app dynamically.This can be done in react native and here also it may be done in flutter. Please let me know if you have any idea
Drop your comments down and let me know
Thank you
This can't be done in Flutter. React Native does it by hauling around the JS compiler. The Flutter compiler (and all the tree-shaken unreferenced classes and methods) are simply gone at release delivery time.
That's why the debug app is so much bigger than the release app. The debug app has your code, the compiler, the hot-loader, and does no tree-shaking to remove unused classes and methods.
I built an application in React, is there a way that the same code will be used for a website?
I know Instagram is built on React and it also has a website, I wonder maybe you should add some link or something that it will open for me as a website?
Or maybe there is no such way and I have to build a website separately?
First off all, If you have written any code which is related to native functionality, then it can be challenging.
If you have only worked with views, images, and some of the basic functionality.
It can be done with react-native-web you can easily migrate your project to react-native-web.
If you project is created with expo they already provide react-native-web support.
Option 2: If you have some of the code you want to share and some is that you don't want to share or can't share.
You can use renderProp or customHooks pattern to reuse your logical code and seperate your view for react-native and react js apps.
If you want to reuse your views too, you can do those with primitives.
you can use styled-component primitives for that.
https://medium.com/react-native-training/sharing-code-between-react-web-and-react-native-applications-7f451af26378
You can get some idea here as well.
We have multiple teams working on an app which is built using React Native. Currently, each team has the entire setup of the app and develops and tests it's piece of the code and finally, merges the code to the master where it's onboarded to the release train. This causes issues, for instance, a package upgrade done by one team could cause a regression in another feature using the same package.
Has any team implemented a smarter method of coding with react native? In the web world, we would have a shell UI, with a navigation bar. Each component would have a link on the navigation bar and load inside an iframe when their component was clicked. As such, each team doesn't necessarily needed to have the the entire UI piece setup on their machines. Also their code wouldn't mess around with code from other teams as their code would sit in their repository. They would have separate build and release cycles.
I tried react native code push and it works flawlessly. Let's say I modify the text in my buttons to say something else, then with a single command, the update is sent to the users.
Now, lets say I am using a new npm library which requires some native code. Say react-native-image-picker (https://github.com/react-community/react-native-image-picker). Can code push handles this? I want the image picker functionality to be updated too in my users app. Thank you.
No - CodePush can only update JavaScript code and images.
CodePush does not update native code at all so any changes to native code require a full app build and deploy via the relevant app store or app distribution tool (e.g. HockeyApp).
Note: There are some limitations around images - full details here.
As far as I've searched it appears to be impossible to load modules (=plugins/libraries?) dynamically (I'm very new to React Native..).
What I'd like to accomplish is to let the user of the app load additional functions as she/he desires.
Example:
A user wants to add a music plugin to the app.
Intuitively, I'd long for something like dynamic library loading. The user would fetch the library, it'll be loaded into the code and can then be executed. However, in React Native it seems like there are only modules that can be loaded?
Alternatively, I'd hope that auto-updating the app would allow to add modules "on-the-fly" ( https://github.com/aerofs/react-native-auto-updater or www.npmjs.com/package/react-native-hot-load ). But I fear that this is only for JS and data content?
The ability to dynamically add functionality to the app is an essential part of the app. I have no previous experience worth mentioning in mobile app development.
Question: Is it possible to dynamically add functionality (also native in nature) to React Native apps?
If not, would there be a workaround?
EDIT: I have found the following repository on github: https://github.com/yusefnapora/react-dynamic-linking-example .
Unfortunately, without any description. I have no idea about Objective-C, but the repo name sounds promising. Anybody knows what its purpose is?