San Song Daddy :): March 2023

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;

view raw App.tsx hosted with ❤ by GitHub

Demo Video

Communication between native and React Native · React Native

In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we’ll eventually find a need to communicate between these two worlds. Some ways to achieve that have been al…

React Native

App launch ads implementation guide for your React Native (Android app)

Post, Code and Quiet Time.

App launch ads implementation guide for your React Native (Android app)

By Errong Leng – 25 Mar 2023 – View online →

Photo by Mona / Unsplash

You might follow the app open implementation guide to integrate the SDK.

This guide is intended for publishers integrating app open ads using the Google Mobile Ads Android SDK.

App open ads can be closed at any time, and are designed to be shown when your users bring your app to the foreground.

As you observed, the app open ads is not shown when your app first got lunched. Assuming your react native app might take some time to show up, you might think of showing a loading spinner to the users. What if you can show a full screen ads instead?
In this post, I will guide you how to implement an App launch ads via Interstitial Ads. By doing so, you can monetize your app and also engage the users with a rich content rather than a ugly waiting screen before your app ready.

Use Interstitial Ads

first of all, you still need to follow the interstitial implementation guide to integrate the SDK. I created a sample launch ads manager java class for your reference.

	import android.app.Activity;
	import android.os.Bundle;
	import android.util.Log;

	import androidx.annotation.NonNull;

	import com.facebook.react.ReactRootView;
	import com.google.android.gms.ads.AdError;
	import com.google.android.gms.ads.AdRequest;
	import com.google.android.gms.ads.FullScreenContentCallback;
	import com.google.android.gms.ads.LoadAdError;
	import com.google.android.gms.ads.interstitial.InterstitialAd;
	import com.google.android.gms.ads.interstitial.InterstitialAdLoadCallback;
	import com.lengerrong.coca.BuildConfig;

	public class LaunchAppAdManager {
	private static final String LOG_TAG = "LaunchAppAdManager";
	private InterstitialAd mInterstitialAd;

	public void load(Activity activity, ReactRootView reactRootView) {
	if (mInterstitialAd != null)
	return;

	AdRequest adRequest = new AdRequest.Builder().build();
	updateAdStateToReact(reactRootView, "AdLoading");

	InterstitialAd.load(activity, BuildConfig.LAUNCH_APP_AD_UNIT_ID, adRequest,
	new InterstitialAdLoadCallback() {
	@Override
	public void onAdLoaded(@NonNull InterstitialAd interstitialAd) {
	// The mInterstitialAd reference will be null until
	// an ad is loaded.
	mInterstitialAd = interstitialAd;
	Log.i(LOG_TAG, "onAdLoaded");
	mInterstitialAd.show(activity);
	updateAdStateToReact(reactRootView, "AdLoaded");

	mInterstitialAd.setFullScreenContentCallback(new FullScreenContentCallback(){
	@Override
	public void onAdClicked() {
	// Called when a click is recorded for an ad.
	Log.d(LOG_TAG, "Ad was clicked.");
	updateAdStateToReact(reactRootView, "AdClicked");
	}

	@Override
	public void onAdDismissedFullScreenContent() {
	// Called when ad is dismissed.
	// Set the ad reference to null so you don't show the ad a second time.
	Log.d(LOG_TAG, "Ad dismissed fullscreen content.");
	mInterstitialAd = null;
	updateAdStateToReact(reactRootView, "AdDismissed");
	}

	@Override
	public void onAdFailedToShowFullScreenContent(AdError adError) {
	// Called when ad fails to show.
	Log.e(LOG_TAG, "Ad failed to show fullscreen content.");
	mInterstitialAd = null;
	updateAdStateToReact(reactRootView, "AdFailedToShow");
	}

	@Override
	public void onAdImpression() {
	// Called when an impression is recorded for an ad.
	Log.d(LOG_TAG, "Ad recorded an impression.");
	updateAdStateToReact(reactRootView, "AdImpression");
	}

	@Override
	public void onAdShowedFullScreenContent() {
	// Called when ad is shown.
	Log.d(LOG_TAG, "Ad showed fullscreen content.");
	updateAdStateToReact(reactRootView, "AdShowedFullScreenContent");
	}
	});
	}

	@Override
	public void onAdFailedToLoad(@NonNull LoadAdError loadAdError) {
	// Handle the error
	Log.d(LOG_TAG, loadAdError.toString());
	mInterstitialAd = null;
	updateAdStateToReact(reactRootView, "AdFailedToLoad");
	}
	});
	}

	public void show(Activity activity) {
	if (mInterstitialAd != null) {
	mInterstitialAd.show(activity);
	} else {
	Log.d(LOG_TAG, "The interstitial ad wasn't ready yet.");
	}
	}

	public void updateAdStateToReact(ReactRootView reactRootView, String adStatus) {
	Bundle updatedProps = reactRootView.getAppProperties();
	updatedProps.putString("launchAdStatus", adStatus);
	reactRootView.setAppProperties(updatedProps);
	}

	}

view raw LaunchAppAdManager.java hosted with ❤ by GitHub

load Interstitial Ads in MainActivity::onCreate callback

Ads need time to load too

Things you need to know is that it always takes some to load the Ads too. Things might be worse if the network is not that fast.

Just as it's important to make sure you display interstitial ads at an appropriate time, it's also important to make sure the user doesn't have to wait for them to load. Loading the ad in advance by calling load() before you intend to call show() can ensure that your app has a fully loaded interstitial ad at the ready when the time comes to display one.

Core Idea

In order to avoid user see empty screen while waiting for the launch ads or the ready app, I split the app start up stage into a few steps:
1. request launch ads in MainActivity::onCreate callback
2. React App show loading spinner(meanwhile prepare user data)
3. Show ads on screen once loaded
4. User closes the ads, native inform to React app ads is dismissed
5. React app hide the loading spinner and show the app with user data

For step 2, you can refer to my previous post, How to display full screen animated gif for your react native app?

The major part is React app need to know the native ads state and change its state accordingly and render proper content to user. Please see my next post: How to pass properties from native(Android) to React Native?

References

mark my first open source contribute to nx Vite

By Errong Leng – 24 Mar 2023 – View online →

Photo by Didier Bn / Unsplash

make vite:build executor return outfile for node executor by lengerrong · Pull Request #15002 · nrwl/nx

fixed #14760 Current Behavior js:node executor can’t use vite:build as build targetExpected Behavior js:node executor should be able to use vite:build as build targetRelated Issue(s) #1476...

GitHub•nrwl

feat(vite): add outfile for build executor (#15002) by mandarini · Pull Request #15845 · nrwl/nx

Moved from here: #15002

GitHub•nrwl

base64 encode/decode padding

Post, Code and Quiet Time.

base64 encode/decode padding

By Errong Leng – 16 Mar 2023 – View online →

Photo by Tobias Pfeifer / Unsplash

You might found base64 string somehow looks like always ends with "=". In fact, "=" is a padding when the base64 string length is not times 4.

for example, "errong.win" string convert to base64 will be "ZXJyb25nLndpbg==". The last two "=" are called padding.

issue with command "echo xxx | base64"

in k8s, the opaque Secret is encoding the secret value with base64. But it is not safe, better to use SealedSecret.

Encrypt your Secret into a SealedSecret, which is safe to store - even inside a public repository.

One of my colleagues encountered a wired issue. She create a opaque secret for a spring data source password value(base64 string via command "echo springdatasourcepassword | base64"). Then convert this secret to a sealed secret.

The sealed secret revealed value looks exactly same as the plain password. But her app always faced login issue. The root cause is the padding. The command didn't appended padding for the encoded password base64 string.

Base64 Decode and Encode - Online

Decode from Base64 format or encode into it with various advanced options. Our site has an easy to use online tool to convert your data.