Code360 powered by Coding Ninjas X Code360 powered by Coding Ninjas X
Table of contents
Creating an Android Native UI Component
Implement Custom ViewManager
Implement Method createViewInstance
Expose View Property Setters using @ReactProp (or @ReactPropGroup) Annotation
Register the ViewManager
Implement the JavaScript Module
Frequently Asked Questions
What is React Native?
What is the difference between React and React Native?
Can existing Apps be migrated to React Native?
Last Updated: Mar 27, 2024

Android Native Components

Author vishal teotia
1 upvote
Master Python: Predicting weather forecasts
Ashwin Goyal
Product Manager @


This article will discuss native UI components and how they can be built and used in React Native. For converting native Java or Objective-C components into React Native components while reusing their native code logic, native UI components are a great option. Facebook created and maintains React Native, an open-source JavaScript framework for developing natively rendered mobile applications. The platform is based on React, a JavaScript library that develops web browser user interfaces.

In React Native, the JavaScript layer exports native components from iOS, such as UIView and UIImageView. This is the type of component we use every day when developing.

In our JavaScript code, we consume UIView from iOS when using the View component in JSX. Additionally, we use the UIImage component from iOS for the Image component, so all of our components use native declarations. There are already many UI components that are wrapped by React Native, such as ScrollView, Button, and Switch.  

However, what about components that are not already wrapped, or what about custom native components we've built for a native app? Those can be wrapped into UI components that we can use in our app.

Creating an Android Native UI Component

There are 5 steps to creating an Android UI component according to React Native's official documentation:

  • Create the ViewManager subclass
  • Implement the createViewInstance method
  • Expose view property setters using @ReactProp (or @ReactPropGroup) annotation. 
  • Register the manager in createViewManagers of the applications package
  • Implement the JavaScript module
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job

Implement Custom ViewManager

The ReactImageManager class extends SimpleViewManager of type ReactImageView for this example. The manager will manage ReactImageView objects, which is the custom native view. Native View types are referenced by their names returned by getName in JavaScript.

public class ReactImageManager extends SimpleViewManager<ReactImageView> {

  public static final String REACT_CLASS = "RCTImageView";
  ReactApplicationContext mCallerContext;

  public ReactImageManager(ReactApplicationContext reactContext) {
    mCallerContext = reactContext;

  public String getName() {
    return REACT_CLASS;

Implement Method createViewInstance

In the createViewInstance method, views are created, the view should be initialized in its default state, and any properties will be set in a subsequent updateView call.

  public ReactImageView createViewInstance(ThemedReactContext context) {
    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);

Expose View Property Setters using @ReactProp (or @ReactPropGroup) Annotation

 In JavaScript, properties need to be exposed as setters annotated with @ReactProperty (or @ReactPropGroup). As a first argument, the setter method should accept the view to be updated and, as a second argument, a property value. Setter should be a public void method.  

A String type argument name is obligatory for annotation @ReactProp. On the JS side, the property is referenced using a name assigned to the @ReactProp annotation.

@ReactProp(name = "src")
  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {

  @ReactProp(name = "borderRadius", defaultFloat = 0f)
  public void setBorderRadius(ReactImageView view, float borderRadius) {

  @ReactProp(name = ViewProps.RESIZE_MODE)
  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {

Register the ViewManager

Finally, the ViewManager must be registered to the application, which is done in a similar way to Native Modules via the member's package function createViewManagers.  

  public List<ViewManager> createViewManagers(
                            ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
      new ReactImageManager(reactContext)

Implement the JavaScript Module

Creating the JavaScript module that provides a layer of communication between Java and JavaScript is the very last step before creating your new view. The interface of this module is recommended for documentation. 

import { requireNativeComponent } from 'react-native';

 * Composes `View`
 * - src: string
 * - borderRadius: number
 * - resizeMode: 'cover' | 'contain' | 'stretch'
module.exports = requireNativeComponent('RCTImageView');


Now, we can use it as a react component in react native

for example,  

    onPlay={() => {

Frequently Asked Questions

What is React Native?

Facebook created and maintains React Native, an open-source JavaScript framework for developing natively rendered mobile applications.

What is the difference between React and React Native?

We use React for web apps and React Native to develop mobile apps.

Can existing Apps be migrated to React Native?

Generally, your app can run on the device so long as it doesn't require heavy computing tasks.


It's pretty handy to build and use native UI components in React Native if you want to implement a feature that's not supported out of the box in your application. Using React Native for converting your existing native iOS and Android applications is extremely useful. Thanks for reading!

Check out this link if you want to learn the in and out of React Native.

If you are preparing for the upcoming Campus Placements, don't worry. Coding Ninjas has your back. Visit this data structure link for cracking the best product companies.

Previous article
Native Modules
Next article
iOS Native Components
Live masterclass