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 specifies that we are going to expose VideoView of Android to react native via this class. A is a React Native interface responsible for instantiating and updating views in the app. The 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. SimpleViewManager<VideoView> ViewManager SimpleViewManager In the manager use the following steps for initial setup of the component: Write a class which inherits from or its subclass ( ) ViewManager SimpleViewManager Implement method , which returns a string constant we use to get the manager from React Native getName 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 then we have to write an addition method to accept data in the component. See method in the code below. props setVideoPath 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 from React Native, we have to register it using a Package Module. Write a class that implements the interface. VideoViewManager ReactPackage In the method, instantiate ViewManager that we want to expose to React Native. createViewManagers() 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 method**.** getPackages() @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 function. 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 method. The second parameter is an object that have for the component. requireNativeComponent getName() props 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 info@47billion.com .
