How to develop Android UI Component for React Native

Android UI Component for React Native (Source: 47Billion)

In one of our project that we developed in React Native, we faced a problem. We wanted to use a video player with the text overlay. Though there are lots of implementation of video players in React Native, none of them provides such a functionality. So we decided to develop our own component and use it in the React native code.

This article describes how to convert any Android view component to a React Native component. This is required when you need to use any Android view or your custom view component in React Native app.

Create View

Create a React Native project. In the project we have Android and IOS folders for native code. Open the Android code in Android Studio and create a view using native java code.

Implement SimpleViewManager

Write a class which inherits from ViewManager. In this class specify which View from Android code is used in the React Native code.

public class VideoViewManager extends SimpleViewManager<VideoView>

The super class SimpleViewManager<VideoView> specifies that we are going to expose VideoView of Android to react native via this class. A ViewManager is a React Native interface responsible for instantiating and updating views in the app. The SimpleViewManager is a generic class that uses our view. We can use any view that already exists in Android like ImageView, VideoView, TextView, LinearLayout or we can implement and use a custom view. Here we are using VideoView.

In the manager use the following steps for initial setup of the component:

1. Write a class which inherits from ViewManager or its subclass (SimpleViewManager)

2. Implement method getName, which returns a string constant we use to get the manager from React Native

3. Implement **createViewInstance(ThemedReactContext reactContext)**method in which we create an instance of the component and return the object.

   public class VideoViewManager extends SimpleViewManager<VideoView> {

   public static final String REACT_CLASS = “VideoView”;

   @Override public String getName() { return REACT_CLASS; }

   @Override protected VideoView createViewInstance(ThemedReactContext reactContext) { VideoView videoView = new VideoView(reactContext); return videoView; }

4. If we want to send some data from React Native code to our component using props then we have to write an addition method to accept data in the component. See setVideoPath method in the code below.

public class VideoViewManager extends SimpleViewManager<VideoView> {

public static final String REACT_CLASS = “VideoView”;

@Override
public String getName() {
  return REACT_CLASS;
}

@Override
protected VideoView createViewInstance(ThemedReactContext reactContext) {
  VideoView videoView = new VideoView(reactContext);
  return videoView;
}

@ReactProp(name=”url”)
public void setVideoPath(VideoView videoView, String urlPath) {
  Uri uri = Uri.parse(urlPath);
  videoView.setVideoURI(uri);
  videoView.start();
 }
}

Create Package Module

In order to call VideoViewManager from React Native, we have to register it using a Package Module. Write a class that implements the ReactPackage interface.

In the createViewManagers() method, instantiate ViewManager that we want to expose to React Native.

public class VideoViewPackage implements ReactPackage {

@Override
  public List<NativeModule>    createNativeModules(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

@Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.<ViewManager>singletonList(
      new VideoViewManager()
    );
  }
}

Add Package Module to Application Class

In the Application class of React Native project add package module in getPackages() method**.**

@Override
protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
     new VideoViewPackage()
  );

}

Implement React Native side

We have to create a JS file and implement the requireNativeComponentfunction. This function receives two parameters. The first parameter is the name of view manager that we have defined in the ViewManager class and returned via getName() method. The second parameter is an object that have props for the component.

Create VideoView.js in src folder. We need to import the component from this file to use it later.

import PropTypes from ‘prop-types’;

import { requireNativeComponent, ViewPropTypes } from ‘react-native’;

var viewProps = {
  name: ‘VideoView’,
  propTypes: {
    url: PropTypes.string,
    …ViewPropTypes,
  }
}
module.exports = requireNativeComponent(‘VideoView’, viewProps);

Using Component

Now we can use our native component in the React Native app.

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import VideoView from './src/VideoView';

export default class App extends Component {

constructor() {
    super();
  }
  render() {
    return (
      <View 
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

<VideoView style={{ flex: 1, width: '100%', height: '100%' }}       
      url="https://www.radiantmediaplayer.com/media/bbb-360p.mp4" />

</View>
    );
  }
}

Thanks for reading. If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

Thanks to Atul Sharma @ 47Billion for details of code. This article is a part of the series of articles related to mobile technology. If you are looking for a Mobile app development team to build your solution, please contact us at [email protected].