React-Native — Writing an Opera For Your native Components in JavaScript

Have you ever tried to develop a React-Native app or even combine it with native components?

After some struggling months of discovering the React world and also the native landscape, I’ve decided to write a blog post about my experience with implementing Anyline into React-Native. Many of you may have heard of React-Native or tried it out and already know the bless and the struggle with it.

What is React?

React itself is just a View layer released by Facebook in 2013. Basically, it’s all about creating custom reusable DOM elements and combine them to a structure of data flow through your application. This is great, because you can split up a big and complex WebApplication into smaller components. Each of those have their own environment called State. Also, you don’t have to worry effecting other components by changing one component.

React comes with his custom Syntax JSX, which in my opinion is really awesome. It’s like combining HTML und Javascript in one Syntax. Every Component has a render function, which depending on the state of the component (and so the information the component has), will render that particular state of the component and also after updating the state elsewhere, it will show the current state.

This will lead you to the conclusion, that React isn’t rendering every component after every state update all the time , and that’s right. React uses a virtual DOM (Document Object Model) to prevent constant re-rendering. It finds the absolute minimal set of DOM mutations needed to display the next state and applies them. No manual DOM manipulation, no ugly two-way-data-binding, just updating single components, when they need to. Pretty cool, huh?

Also, if you have seen Westworld, every Host is built using React.

Wow, this React has no Cons, right?

Wrong! React is great, no question, but it also has his downsides. At first, learning React will take some time and will slow down your workflow tremendously in the beginning. Also, you will have to reinvent some wheels. The initial implementation and creating a good codebase to get started can be very time-consuming.

Anyway, you have to get structure into your app and define a architecture for managing your data flow (like Redux).

What is React-Native?

React-Native is like the conductor of native components. You write your Opera in Javascript and it will conduct the native components when, where and how you want it. A bit more in detail, React-Native communicates over the a React-Native Bridge with its own Javascript thread to all the native components in a native thread. It’s like a Browser, but instead of rendering divs, tables, spans or h3’s, it renders native components. So, when you’re building your production ready app, you will end up with the React-Native libraries and all your native components which are all compiled with your platform’s standard build tools. Additional you will get a big Javascript bundle that contains all your Javascript Code. When the application starts, React-Native will start the Javascript code that will define, which components are to be created on the screen.

Interesting fact about this is that in debug mode, all your Javascript code runs on your main machine and is only be provided through the wire. So you can use HotReloading without even restart your app. Also during debug mode, you can run multiple devices even on different platforms (iOS, Android or Web), which all react live on your Code Changes *Mind Blown*.

OK, enough “each one teach one”, how did you implement Anyline?

In React-Native you can implement Native Modules for Android and iOS. So you build your React-Native app and communicate with your native code over the React-Native Bridge Module. You now should just call native functions from Javascript, hand over parameters and provide callbacks. With React-Native Link every native dependency gets linked to your project. Easy, isn’t it!

With this, you can simply rebuild your app and refactor everything to Javascript piece by piece. Also, for complex native high-performance code that you don’t want to give out into the Javascript world. To give you some example code, here is a snippet from our React-Native Anyline Wrapper . We call a function to start the scan, that we want to pass through to our native component:

AnylineOCR.setupScanViewWithConfigJson(
JSON.stringify(config),
type,
this.onResult,
this.onError
);

in Android, we can get this call by:

@ReactMethod
public void setupScanViewWithConfigJson(String config, String scanMode, Callback onResultReact, Callback onErrorReact) {

...

}

and in iOS:

RCT_EXPORT_METHOD(setupScanViewWithConfigJson:(NSString*)config scanMode:(NSString *)scanMode

onResultCallback:(RCTResponseSenderBlock)onResult onErrorCallback:(RCTResponseSenderBlock)onError) {

...

}

So, should I use React-Native from now on?

As always, it depends on your project and personal preferences. I’m really deep into the React world and do think having a common codebase and split everything up by smaller components is great for future feature implementation and of course the team development process. Also you don’t have to renounce of native functions and have most of the native advantages. At first you will have a rough start, but when you get into it, you don’t want to miss it! :)

QUESTIONS? LET US KNOW!

I hope you had a good read and got an idea of the basics of React and how your project could look like with it! Anyway, if you want to check out our implementation of React-Native, check out our Github Repo. Feel free to contribute or suggest any improvements! If you have questions, suggestions or feedback on this, please don’t hesitate to reach out to us via Facebook, Twitter or simply via hello@anyline.io! Cheers!