A brief introduction to React Native’s new architecture.
One thing that stayed with me all this time was the love for console.log . Today, I’m using different debuggers and minifiers for debugging my code but I don’t trust anyone as much as I do console.log.
It’s not that simple
Yes, it’s not. Once, I tried to print the value of console.log in the browser and got a function that says native code. See the image below.
Chrome in a normal environment
This was pretty much meeting my expectations as console.log is anyway a function lying inside WebAPIs which has native code. But I tried a similar thing inside a react native environment, and that’s where things started taking a turn. See the image below.
Safari in React Native JSContext
Let’s find out
I finally landed on React Native’s Github repository and searched for console. See the image below.
Two console.js files came up — the first one inside flow which has the type declarations for the module, and the one inside polyfills appeared to be a good place to start investigating. So I opened the file, started messing around, and read the functions until I found this function getNativeLogFunction. See below.
function getNativeLogFunction inside console.js file
This function takes in the argument of log level, manipulates our string, and finally calls the nativeLoggingHook on the global object. But there is no function with the name nativeLoggingHook in the browser.
This got me curious and I investigated further to see if React Native provides an implementation of this function.
So now I searched for nativeLoggingHook in the repo and interestingly found one file. See the image below.
After giving it a few minutes I realized how bad I’m at CPP so before going into depression, I did what I’ve been doing a lot while learning new things — I assumed that I know what this code does and moved ahead with my investigation to how bindNativeLogger is used in the code.
I searched bindNativeLogger in the repository and found two files. See the image below.
Credit: YT video — Building React Native: Take a look at the internals — Parashuram N
This got me even more curious and then I got to know about React Native’s new architecture that’s been under development. This was just a brief introduction to light up your curiosity about this new and interesting thing that’s been cooking inside the React Native community.
If you’re someone that’s been developing mobile apps on React Native then do subscribe to this blog as in the next part of this I’ll be deep-diving more inside this new architecture and explore things like TurboModules, JSI, Fabric, and CodeGen.
LET THE GEEK INSIDE YOU WIN!