How to develop Android UI Component for React Native
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
In the manager use the following steps for initial setup of the component:
- Write a class which inherits from ViewManager or its subclass (SimpleViewManager)
- Implement method getName, which returns a string constant we use to get the manager from React Native
- 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”;
@Overridepublic String getName() { return REACT_CLASS;}
@Overrideprotected 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”;
@Overridepublic String getName() { return REACT_CLASS;}
@Overrideprotected 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.
@Overrideprotected 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].