Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 184.108.40.206 release ready!
Updated 5 March 2021
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.
After completing this blog we will be able to :
Firstly, we will open the android code of our React Native Application in Android Studio.
Now, we will create our Custom Android View.
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.
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.
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
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.