Java Modules in React Native

      So I'm back from a nice winter break, and I'm reading to keep learning! At work I was asked to do some things by making a custom Java Module in React Native, which I thought was really interesting. The idea is that you can put Java code into your React Native app, which is especially good if you want to use an existing Java library or write multi-threaded code! For now I just wrote some simple functions that will allow us to mix colors using hex values.

     To start, I built a new React-Native app using the react-native cli, and then opened the Android folder in Android Studio. I added a class called 'HelloWorld.java', which extended the ReactContextBaseJavaModule and would simply print out in the logs "Hello World!".  I then had to create a package that included this class and add that package to my MainActivity.java. Once all the ground work was laid, getting the app to communicate with Java really wasn't too hard.

    I had to add my HelloWorld class as a native module in the React code, and then I could use that variable to call my Java functions. My Java functions are a simple function that returns 'Hello World' and another function that adds two hex numbers together for the purpose of finding a new color (it doesn't actually mix colors because I couldn't quite figure out that algorithm). One trick I found is that in order for the Java code to send data back to the React Native code, we need to make sure our Java React Methods are Blocking Synchronous Methods. Otherwise we will receive undefined or unreliable data back.

     I would like to continue learning about writing Java code in React Native, it seems like a great way to make up for some of React Native's deficiencies. You can check out my full code here, but this was really just a simple experiment.

Comments

Popular posts from this blog

API's in C#

Using WebRTC to build a videophone in React and TypeScript

Reviewing WPF and MVVM