San Song Daddy :): How to pass properties from native(Android) to React Native?

How to pass properties from native(Android) to React Native?

By Errong Leng – 25 Mar 2023 – View online →

You can pass properties down to the React Native app by providing a custom implementation of ReactActivityDelegate in your main activity. This implementation should override getLaunchOptions to return a Bundle with the desired properties.

The key part is a custom implementation of ReactActivityDelegate

I always like to show you code first before dive deep the implementation.

	import android.os.Bundle;

	import androidx.annotation.NonNull;
	import androidx.annotation.Nullable;

	import com.facebook.react.ReactActivity;
	import com.facebook.react.ReactRootView;
	import com.facebook.react.defaults.DefaultReactActivityDelegate;

	public class CustomReactActivityDelegate extends DefaultReactActivityDelegate {
	private ReactRootView mRootView;

	public CustomReactActivityDelegate(@NonNull ReactActivity activity, @NonNull String mainComponentName, boolean fabricEnabled, boolean concurrentRootEnabled) {
	super(activity, mainComponentName, fabricEnabled, concurrentRootEnabled);
	}

	public ReactRootView getReactRootView() {
	return mRootView;
	}

	@Nullable
	@Override
	protected Bundle getLaunchOptions() {
	return new Bundle();
	}

	@NonNull
	@Override
	protected ReactRootView createRootView() {
	mRootView = super.createRootView();
	return mRootView;
	}
	}

view raw CustomReactActivityDelegate.java hosted with ❤ by GitHub

ReactRootView

The guide says how to set app properties via a react root view, but it didn't mention how you can get it.

mReactRootView.setAppProperties(updatedProps);

I fulfilled that part in my custom react activity delegate snippets:

ReactRootView::setAppProperties

ReactRootView provides a read-write property appProperties. After appProperties is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.

I used it in my custom LaunchAppAdManager.java and update the app properties in the Ads status callback.

React Native App.tsx

based on the launch ads state, React app decides show Home component or Interstitial(I used a full screen gif as the loading spinner).

	import React from 'react';

	import Interstitial from './layout/Interstitial';
	import Home from './layout/Home';

	enum AdStatus {
	AdLoading = "AdLoading",
	AdFailedToLoad = "AdFailedToLoad",
	AdLoaded = "AdLoaded",
	AdShowedFullScreenContent = "AdShowedFullScreenContent",
	AdFailedToShow = "AdFailedToShow",
	AdClicked = "AdClicked",
	AdImpression = "AdImpression",
	AdDismissed = "AdDismissed",
	}

	interface AppProps {
	launchAdStatus: AdStatus;
	}

	function App({launchAdStatus}: AppProps): JSX.Element {
	switch (launchAdStatus) {
	case AdStatus.AdFailedToShow:
	case AdStatus.AdFailedToLoad:
	case AdStatus.AdDismissed:
	return <Home />
	default:
	return <Interstitial></Interstitial>
	}
	}

	export default App;