Wednesday , September 18 2019
Home / Uncategorized / How to develop Android UI Component for React Native

How to develop Android UI Component for React Native



In one of our projects developed in React Native, we have faced a problem. We wanted to use a video player with text overlay. Although there are many implementations of video players in React Native, none of these offers such functionality. So we decided to develop our component and use it in the native React code.

This article describes how to convert any Android display component to a React Native component. It is necessary when you need to use any Android view or custom display component in the 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 that inherits from ViewManager. In this class, specify which view from the Android code is used in the React Native code.

public class VideoViewManager extends SimpleViewManager

The super class SimpleViewManager specifies that we are going to expose Android's VideoView to react natively via this class. A ViewManager is a React Native interface responsible for instantiating and updating views in the app. The SimpleViewManager it is a generic class that uses our sight. We can use any view that already exists in Android such as 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 the initial installation of the component:

  1. Write a class that inherits from ViewManager or its subclass (SimpleViewManager)
  2. Implementation method getName, which returns a string constant that we use to get the manager from React Native
  3. Tool createViewInstance (ThemedReactContext reactContext)method in which we create a & # 39; instance of the component and return the object.
public class VideoViewManager it extends SimpleViewManager    {
static public final string REACT_CLASS = "VideoView";
@Oltrepassare
public String getName () {
return REACT_CLASS;
}
@Oltrepassare
VideoView protected createViewInstance(ThemedReactContext reactContext) {
VideoView videoView = new VideoView (reactContext);
return videoView;
}

4. If we want to send some data from the React Native code to our component using scene objects so we need to write an addition method to accept the data in the component. See setVideoPath method in the code below.

public class VideoViewManager it extends SimpleViewManager    {
static public final string REACT_CLASS = "VideoView";
@Oltrepassare
public String getName () {
return REACT_CLASS;
}
@Oltrepassare
VideoView protected createViewInstance(ThemedReactContext reactContext) {
VideoView videoView = new VideoView (reactContext);
return videoView;
}
@ReactProp (name = "URL")
public blank setVideoPath(VideoView videoView, String urlPath) {
Uri uri = Uri.parse (urlPath);
videoView.setVideoURI (uri);
videoView.start ();
}
}

Create package form

To call VideoViewManager from React Native, we must register it using a package form. Write a class that implements the ReactPackage interface.

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

public class VideoViewPackage tools ReactPackage {
@Oltrepassare
public list createNativeModules(ReactApplicationContext reactContext) {
return Collections.emptyList ();
}
@Oltrepassare
public list createViewManagers(ReactApplicationContext reactContext) {
return the collections.singletonList (
new VideoViewManager ()
);
}
}

Add the package form to the application class

In the Application class of the React Native module, add the package module to getPackages () method.

@Oltrepassare
List protected getPackages() {
return Arrays.asList (
new MainReactPackage (),
new VideoViewPackage ()
);
}

Implement the React Native side

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

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

import PropTypes from & # 39; prop-types & # 39 ;;
import {requireNativeComponent, ViewPropTypes} from & # 39; react-native & # 39 ;;
var viewProps = {
name: "VideoView",
propTypes: {
url: PropTypes.string,
... ViewPropTypes,
}
}
module.exports = requireNativeComponent("VideoView", viewProps);

Using the component

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

import React, {Component} from & # 39; react & # 39 ;;
import {StyleSheet, View} from & # 39; react-native & # 39 ;;
Import VideoView from & # 39; ./ src / VideoView & # 39 ;;
exports the default class App it extends Component {
constructor () {
super();
}
render () {
return (
<View
style = {{flex: 1, justifyContent: & # 39; center & # 39 ;, alignItems: & # 39; center & # 39;}}>
<VideoView style = {{flex: 1, width: & # 39; 100% & # 39 ;, height: & # 39; 100% & # 39;}}       
url = "https://www.radiantmediaplayer.com/media/bbb-360p.mp4" />

);
}
}

Thanks for reading. If you enjoyed this article, feel free to press the clap pulsante button to help others find it.

Thanks to Atul Sharma @ 47Billion for the details of the code. This article is part of the series of articles related to mobile technology. If you're looking for a mobile app development team to create your solution, contact us at the address info@47billion.com.


Source link

Leave a Reply

Your email address will not be published.