Java

React Native Brownfield provides first-class support for Java.

Kotlin Setup

Even though the library provides first-class Java support, it's written in Kotlin. To compile the project with React Native Brownfield, we need to make sure that our project's build.gradle file contains the required Gradle plugin.

buildscript {
    ext {
        ...
        kotlinVersion = '2.0.21'
    }
    dependencies {
        ...
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
    }
}

React Native >= 0.80.0

With react-native >= 0.80.0, an auto-generated file was added which is responsible to load your App's native libs. If you're consuming this library in a RN project, then you will have this file ReactNativeApplicationEntryPoint available. If you're consuming this library in a RN android library which is backed by com.callstack.react:brownfield-gradle-plugin, then this file will also be available.

Below is the code you need to add before you call ReactNativeBrownfield.initialize:

import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative

loadReactNative(application);
ReactNativeBrownfield.initialize(application, packages);

NOTE

Previously, you were required to implement DefaultHardwareBackBtnListener in your calling Activity. Now with > 1.1.0 you are not required to do that step. If you're upgrading to the latest version then you can safely remove that interface implementation from your calling Activity.

API Reference

`ReactNativeBrownfield`

You can import the object from:

import com.callstack.reactnativebrownfield.ReactNativeBrownfield;

Statics

`initialize`

A function used to initialize a React Native Brownfield singleton. Keep in mind that it doesn't load React Native bundle.

Param	Required	Type	Description
application	Yes	`Application`	Main application.
reactHost	Exclusively*	`ReactHost`	An instance of ReactHost.
packages	Exclusively*	`List<ReactPackage>`	List of your React Native Native modules.
options	Exclusively*	`HashMap<String, Any>`	Map of initial options. Options listed below.
onJSBundleLoaded	Exclusively*	`OnJSBundleLoaded`	Callback invoked after JS bundle is fully loaded.

* - From the marked fields, exactly one must be specified, excluding the others. See examples below.

Available options:

useDeveloperSupport: Boolean - Flag to use dev support.
packages: List<ReactPackage> - List of your React Native Native modules.
mainModuleName: String - Path to react native entry file (when loading from Metro).
bundleAssetPath: String - Path to react native bundle asset file (when loading from app assets), appended to asset://.

Examples:

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  @Override
  public boolean getUseDeveloperSupport() {
    return BuildConfig.DEBUG;
  }

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    return packages;
  }

  @Override
  protected String getJSMainModuleName() {
    return "index";
  }
};

ReactNativeBrownfield.initialize(this, mReactNativeHost);

// OR

ReactNativeBrownfield.initialize(this, mReactNativeHost, initialized -> {
  // JS bundle loaded
});

List<ReactPackage> packages = new PackageList(this).getPackages();

ReactNativeBrownfield.initialize(this, packages);

// OR

ReactNativeBrownfield.initialize(this, packages, initialized -> {
  // JS bundle loaded
});

List<ReactPackage> packages = new PackageList(this).getPackages();
HashMap<String, Object> options = new HashMap<String, Any>();
options.put("packages", packages);
options.put("mainModuleName", "example/index");

ReactNativeBrownfield.initialize(this, options);

// OR

ReactNativeBrownfield.initialize(this, options, initialized -> {
  // JS bundle loaded
});

`getShared`

A singleton that keeps an instance of ReactNativeBrownfield object.

ReactNativeBrownfield.getShared()

Properties

Property	Type	Default	Description
reactHost	`ReactHost`	null	An instance of ReactHost.

Methods

`createView`

Creates a React Native view with a given module name. It automatically uses an instance of React Native created in initialize method. This is useful when embedding React Native views directly in your native layouts.

Param	Required	Type	Description
context	Yes	`Context`	Android context to create the view
activity	No	`FragmentActivity`	Activity hosting the view, used for lifecycle management
moduleName	Yes	`String`	Name of React Native component registered to `AppRegistry`
launchOptions	No	`Bundle`	Initial properties to be passed to React Native component

Returns: FrameLayout - A view containing the React Native component.

Examples:

// In a Fragment or Activity
FrameLayout reactView = ReactNativeBrownfield.getShared().createView(
  context,
  activity,
  "ReactNative"
);
container.addView(reactView);

`ReactNativeFragment`

A fragment rendering ReactRootView with a given module name. It automatically uses an instance of React Native created in initialize method. It works well with exposed JavaScript module. All the lifecycles are proxied to ReactInstanceManager. It's the simplest way to embed React Native into your navigation stack.

import com.callstack.reactnativebrownfield.ReactNativeFragment;

Statics

`createReactNativeFragment`

Creates a Fragment with ReactNativeActivity, you can use it as a parameter in the startActivity method in order to push a new activity with embedded React Native.

Param	Required	Type	Description
moduleName	Yes	`String`	Name of React Native component registered to `AppRegistry`.
initialProps	No	`Bundle` \|\| `HashMap<String, *>` \|\| `ReadableMap`	Initial properties to be passed to React Native component.

Examples:

ReactNativeFragment.createReactNativeFragment("ReactNative");

Bundle bundle = new Bundle();
bundle.putInt("score", 12);

ReactNativeFragment.createReactNativeFragment("ReactNative", bundle);

HashMap map = new HashMap<String, *>();
map.put("score", 12);

ReactNativeFragment.createReactNativeFragment("ReactNative", map);

WritableMap map = new WritableMap();
map.putInt("score", 12);

ReactNativeFragment.createReactNativeFragment("ReactNative", map);

Example

You can find an example app here.

Need React or React Native expertise you can count on?

Let's talk Let's talk

Need help with React or React Native projects?

We support teams building scalable apps with React and React Native.

Let's talk Let's talk

Java

React Native Brownfield provides first-class support for Java.

Kotlin Setup

buildscript {
    ext {
        ...
        kotlinVersion = '2.0.21'
    }
    dependencies {
        ...
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
    }
}

React Native >= 0.80.0

Below is the code you need to add before you call ReactNativeBrownfield.initialize:

import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative

loadReactNative(application);
ReactNativeBrownfield.initialize(application, packages);

NOTE

API Reference

`ReactNativeBrownfield`

You can import the object from:

import com.callstack.reactnativebrownfield.ReactNativeBrownfield;

Statics

`initialize`

A function used to initialize a React Native Brownfield singleton. Keep in mind that it doesn't load React Native bundle.

Param	Required	Type	Description
application	Yes	`Application`	Main application.
reactHost	Exclusively*	`ReactHost`	An instance of ReactHost.
packages	Exclusively*	`List<ReactPackage>`	List of your React Native Native modules.
options	Exclusively*	`HashMap<String, Any>`	Map of initial options. Options listed below.
onJSBundleLoaded	Exclusively*	`OnJSBundleLoaded`	Callback invoked after JS bundle is fully loaded.

* - From the marked fields, exactly one must be specified, excluding the others. See examples below.

Available options:

useDeveloperSupport: Boolean - Flag to use dev support.
packages: List<ReactPackage> - List of your React Native Native modules.
mainModuleName: String - Path to react native entry file (when loading from Metro).
bundleAssetPath: String - Path to react native bundle asset file (when loading from app assets), appended to asset://.

Examples:

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  @Override
  public boolean getUseDeveloperSupport() {
    return BuildConfig.DEBUG;
  }

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    return packages;
  }

  @Override
  protected String getJSMainModuleName() {
    return "index";
  }
};

ReactNativeBrownfield.initialize(this, mReactNativeHost);

// OR

ReactNativeBrownfield.initialize(this, mReactNativeHost, initialized -> {
  // JS bundle loaded
});

List<ReactPackage> packages = new PackageList(this).getPackages();

ReactNativeBrownfield.initialize(this, packages);

// OR

ReactNativeBrownfield.initialize(this, packages, initialized -> {
  // JS bundle loaded
});

List<ReactPackage> packages = new PackageList(this).getPackages();
HashMap<String, Object> options = new HashMap<String, Any>();
options.put("packages", packages);
options.put("mainModuleName", "example/index");

ReactNativeBrownfield.initialize(this, options);

// OR

ReactNativeBrownfield.initialize(this, options, initialized -> {
  // JS bundle loaded
});

`getShared`

A singleton that keeps an instance of ReactNativeBrownfield object.

ReactNativeBrownfield.getShared()

Properties

Property	Type	Default	Description
reactHost	`ReactHost`	null	An instance of ReactHost.

Methods

`createView`

Param	Required	Type	Description
context	Yes	`Context`	Android context to create the view
activity	No	`FragmentActivity`	Activity hosting the view, used for lifecycle management
moduleName	Yes	`String`	Name of React Native component registered to `AppRegistry`
launchOptions	No	`Bundle`	Initial properties to be passed to React Native component

Returns: FrameLayout - A view containing the React Native component.

Examples:

// In a Fragment or Activity
FrameLayout reactView = ReactNativeBrownfield.getShared().createView(
  context,
  activity,
  "ReactNative"
);
container.addView(reactView);

`ReactNativeFragment`

import com.callstack.reactnativebrownfield.ReactNativeFragment;

Statics

`createReactNativeFragment`

Creates a Fragment with ReactNativeActivity, you can use it as a parameter in the startActivity method in order to push a new activity with embedded React Native.

Param	Required	Type	Description
moduleName	Yes	`String`	Name of React Native component registered to `AppRegistry`.
initialProps	No	`Bundle` \|\| `HashMap<String, *>` \|\| `ReadableMap`	Initial properties to be passed to React Native component.

Examples:

ReactNativeFragment.createReactNativeFragment("ReactNative");

Bundle bundle = new Bundle();
bundle.putInt("score", 12);

ReactNativeFragment.createReactNativeFragment("ReactNative", bundle);

HashMap map = new HashMap<String, *>();
map.put("score", 12);

ReactNativeFragment.createReactNativeFragment("ReactNative", map);

WritableMap map = new WritableMap();
map.putInt("score", 12);

ReactNativeFragment.createReactNativeFragment("ReactNative", map);

Example

You can find an example app here.

#Java

#Kotlin Setup

#React Native >= 0.80.0

#API Reference

#ReactNativeBrownfield

#Statics

#initialize

#getShared

#Properties

#Methods

#createView

#ReactNativeFragment

#Statics

#createReactNativeFragment

#Example

Need React or React Native expertise you can count on?

#Java

#Kotlin Setup

#React Native >= 0.80.0

#API Reference

#ReactNativeBrownfield

#Statics

#initialize

#getShared

#Properties

#Methods

#createView

#ReactNativeFragment

#Statics

#createReactNativeFragment

#Example

Java

Kotlin Setup

React Native >= 0.80.0

API Reference

`ReactNativeBrownfield`

Statics

`initialize`

`getShared`

Properties

Methods

`createView`

`ReactNativeFragment`

Statics

`createReactNativeFragment`

Example

Java

Kotlin Setup

React Native >= 0.80.0

API Reference

`ReactNativeBrownfield`

Statics

`initialize`

`getShared`

Properties

Methods

`createView`

`ReactNativeFragment`

Statics

`createReactNativeFragment`

Example