What is libreactn?

libreactn is a collection of components for React Native.

How does it look like?

libreactn is packaged as a Node module in a tarball file and needs an API Key (free for evaluation).

Integration Guidelines


Some components may be constrained to a minimal version of React Native. Refer to their section.

Step 1: Installation

Go to the Download section and choose preferably the latest .tgz file.

Run the following commands from your project directory:

npm install maxcom-react-native-components-<version>.tgz
react-native link @maxcom/react-native-components
Additional step for React Native < 0.56

On build, Gradle 4.4 will produce a warning because of the presence of a '/' character in the project name derived from a scoped node package name. The support of such a character is annonced to have been deprecated and is scheduled to be removed in Gradle 5.0.

An adjustment in the react-native tooling to replace '/' by '_' is effective as of version 0.56. Before it, you have to do yourself the replacement of ':@maxcom/react-native-components' by ':@maxcom_react-native-components' in these project files: android/settings.gradle and android/app/build.gradle.

Additional step for React Native < 0.58

If your gradle plugin version is already 3.0.0+, you should replace the deprecated compile dependency type by the implementation dependency type in android/app/build.gradle.

Step 2: Get an API Key

Go to the License section and request a Key.

Copy-paste this Key in your AndroidManifest.xml file as the YOUR_API_KEY below:

<manifest ... >
  <application ... >
    <activity ... > </activity>
    <meta-data android:name="fr.maxcom.libreactn.apiKey" android:value="YOUR_API_KEY" />


Fullscreen WebView (Android Only)


The Android variant of the React Native WebView component doesn't support the fullscreen mode, contrary to the iOS variant.
This component provides a WebView manager in order to support the fullscreen mode, typically allowing some media players to display a button to enter/exit the mode.

Vimeo example:


This component


  • React Native >= 0.50.0, the version that brought the nativeConfig property.


import {
} from "react-native";
import { RCTMxWebView } from '@maxcom/react-native-components';
const nativeConfig = Platform.OS === "android" ? {
  nativeConfig: {
	component: RCTMxWebView,
	props: {
	  /* consoleMessageEnabled: false, */
	  /* webContentsDebuggingEnabled: false */
} : null;

  /* for example
  const source = { html: `
	<iframe src='https://player.vimeo.com/video/...some id...' width='320' height='180'
	  frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

  return (
	  /* style={{ flex: 1 }} */
	  /* source={source} */




Allows the report of the JavaScript console messages to the host application. The default value is false.

To mimic the original manager, you may wish to restrict the enabling to development context only. For example:

props: {
  consoleMessageEnabled: __DEV__,


Enables debugging of web contents (HTML / CSS / JavaScript) loaded into any WebViews of the host application. The default value is false.

The setting has an effect only as of KitKat (Android 4.4 - API level 19). Refer to Remote Debugging WebViews.

To mimic the original manager, you should probably restrict the enabling to development context only. For example:

props: {
  webContentsDebuggingEnabled: __DEV__,