React-native bridge for noobs!

hello world!

In this article I am going to explain what you should do when it comes to react-native bridging.

HOW REACT-NATIVE ACTUALLY WORKS

This part is most crucial to figure out your moves when you are bridging a component.

let’s go back a few steps, and ask the question… How do you make something that works across multiple platforms as far apart as android and ios are.

Get Jagdeepak Singh Rawat’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

the solutions are:-

1. you create a compiler that is able to convert all your JavaScript code into platform specific code. is this even possible ..considering how different those two platforms are and how fast they are changing… keeping up with updates will be a hell of a job.
2. You create some program that just connects JavaScript code with already created android/ios components. So that when you write something in JavaScript for example a “button” element, react-native will get an android/ios button and pass it to your view. You will see a button in both android and ios. And this connector will let you pass events, listen to events on this button.

This is exactly what smart guys at react-native development team have accomplished. And the connector is called “REACT-NATIVE BRIDGE” . The Blue circle in below diagram is where it resides.

the architecture of react-native for noobs

Every component that you ever used in react-native is actually bridged by somebody else for you, so that you can just say <Button> in react-native and it will give you a button.

Now How do you bridge something that is not already bridged by somebody else?

FOR GUI ELEMENTS

you just tell the “react-native bridge” if somebody wants <CustomComponent> , it should give some native android/ios view and your work is done.