Start a Project

Create Android Component for React Native Application

In this blog, we will learn how we can create Android Component for React Native Application.

Well, if you start working on React Native, you will find that this is much simpler to use and built applications beautifully.

But if you have worked on any one platform for some time, you will soon find that there are many things that you just want to implement in the native platform code and then use it in your react native code.

This blog will just be a guide on creating a Custom Android View for your React Native  Application.

Objectives :

After completing this blog we will be able to :

  1. Create a Custom UI component
  2. Passing props to Custom Component

Tools You Will Need :

Let’s start

Part 1: Create a Custom UI component

Firstly, we will open the android code of our React Native Application in Android Studio.

Now, we will create our Custom Android View.

Changes in Android Code :

We name this as MyComponent which actually is an extension of the AppCompatButton.

Now Our custom Component class will look like something below :

As we have completed the creation of our view component.

We now need to create a bridge that will help our native component to be bound two way( both  Java & React Native code).

This bridge will help us in retrieving the properties changed through React Native code to the component & on the screen.

Also, this bridge will help us with the user interaction & bringing the user interaction related changes to our React Native code.

This in React Native is known as ViewManager.

You can find a reference to ViewManager in the official guides over here

Next step is to create a MyComponentManager.java class which extends the SimpleViewManager class from React Native Package.

As we complete this step, now we need to create a Package so that we are finally able to use this view in our React Native Code.

Let’s name our package as MyCustomPackage.java

Now, we need to add this package to our Application class.

Go to the MainApplication.java class and add our newly created package name in the file as shown below :

With this final step, we just completed creating the Android Component.

Changes in React Native Code

Now let’s switch over to our React Native Code and try to use our newly created package.

Open React Native Code in your TextEditor.

Modify the content of your App.js

Now, just try running the Android application through react-native cli (i.e using react-native run-android) command.

As soon as your application is launched, you will see the screen like below  

 

With this, we just completed creating a custom android component and using this in our React Native Code.

The background in the above is actually maintained by the SimpleViewManager class & the styles attribute we used in our App.js class.

 

Part 2: Passing props to Custom Component

Now, we will start looking into how we can create our custom properties and pass those as arguments to the View just created.

Let’s just try setting the background color & text in the views created.

Firstly we will modify our MyComponent.java class as shown below :

Modify MyComponentManager.java class so we can add custom properties to our view

Now we just need to pass these as properties of our Component in our React Native Code, so we will modify our React Native App.js file as below :

Let’s just have a view of what we built :

 

And with this, we just completed creating our Android Component for React Native Application.

P.S: The blog & screenshots associated focuses on code end, you can obviously use your logic to make the component beautiful, presentable as per your use case.

Keep coding and Keep Sharing 

References: https://facebook.github.io/react-native/docs/native-components-android

 

 

 

 

Exit mobile version