Table of contents
1.
Introduction
2.
Creating an Android Native UI Component
3.
Implement Custom ViewManager
4.
Implement Method createViewInstance
5.
Expose View Property Setters using @ReactProp (or @ReactPropGroup) Annotation
6.
Register the ViewManager
7.
Implement the JavaScript Module
8.
Usage
9.
Frequently Asked Questions
9.1.
What is React Native?
9.2.
What is the difference between React and React Native?
9.3.
Can existing Apps be migrated to React Native?
10.
Conclusion
Last Updated: Mar 27, 2024
Easy

Android Native Components

Author vishal teotia
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

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

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;
  }

  @Override
  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.

@Override
  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) {
    view.setSource(sources);
  }

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

  @ReactProp(name = ViewProps.RESIZE_MODE)
  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
    view.setScaleType(ImageResizeMode.toScaleType(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.  

@Override
  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');

Usage

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

for example,  

<RCTImageView
    style={styles.Image}
    border={2px}
    onPlay={() => {
        console.log('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.

Conclusion

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.

Live masterclass