In App Messaging access additional options

[rjsajnani]

Hi guys,

I would like to access the additional parameters options via in-app messaging, they mention this when I create it (Key/value pairs that will be delivered with the message to your app).

But when my device receives the in-app message I don't see these values on the console (even after clicking it).

Is there any method or function I need to access?

Do let me know.

Thanks in advance

[mikehardy]

Hi there! If I am not mistaken, I believe you are referring to the ability to get the data out of an in app message when the user interacts with it?

https://firebase.google.com/docs/in-app-messaging/modify-message-behavior#implement_a_displaydelegate_to_handle_card_interactions

https://firebase.google.com/docs/in-app-messaging/modify-message-behavior#use_campaign_custom_metadata

Unfortunately, while the message suppression, data collection, and manual message trigger APIs are implemented, these native firebase SDK click listeners (which are where the data would be accessed and presented to the javascript layer) have not been implemented by react-native-firebase so this data is not available at the moment

For you (or anyone) interested in implementing them, there are lots and lots of native SDK listeners implemented already so there are quite a few chunks of code to use as patterns.

Developing for react-native-firebase is not so hard - if you follow the https://github.com/invertase/react-native-firebase/blob/master/tests/README.md for the tests app, setup takes a little bit of time, but then the code/test/debug loop is quite fast.

Implementing simply the messageClicked handler would get you what you need, and implementing one handler may not be the work of more than an hour or two?

Here is an example to pattern off of, this is how the firebase.auth() auth listener works - I think it is similar to how an in-app-messaging messageClicked handler would work

• type for the method call to add a listener:

  react-native-firebase/packages/auth/lib/index.d.ts

  Lines 1269 to 1289 in f501fff

  	/**
  	* Listen for changes in ID token.
  	* This method returns a unsubscribe function to stop listening to events.
  	* Always ensure you unsubscribe from the listener when no longer needed to prevent updates to components no longer in use.
  	*
  	* #### Example
  	*
  	* ```js
  	* const unsubscribe = firebase.auth().onIdTokenChanged((user) => {
  	* if (user) {
  	* // User is signed in or token was refreshed.
  	* }
  	* });
  	*
  	* // Unsubscribe from further state changes
  	* unsubscribe();
  	* ```
  	*
  	* @param listener A listener function which triggers when the users ID token changes.
  	*/
  	onIdTokenChanged(listener: CallbackOrObserver<AuthListenerCallback>): () => void;

• type for the callback method you would register in the listener, something like this but would also need an enumeration type for the dismiss type and the data bundle:

  react-native-firebase/packages/auth/lib/index.d.ts

  Lines 638 to 655 in f501fff

  	/**
  	* An auth listener callback function for {@link auth#onAuthStateChanged}.
  	*
  	* #### Example
  	*
  	* ```js
  	* function listener(user) {
  	* if (user) {
  	* // Signed in
  	* } else {
  	* // Signed out
  	* }
  	* }
  	*
  	* firebase.auth().onAuthStateChanged(listener);
  	* ```
  	*/
  	export type AuthListenerCallback = (user: User | null) => void;

• example enumeration type to show how to model DismissType for the click argument

  react-native-firebase/packages/firestore/lib/index.d.ts

  Line 188 in f501fff

  export type DocumentFieldType =

• android listener state management example from Java

  • react-native-firebase/packages/auth/android/src/main/java/io/invertase/firebase/auth/ReactNativeFirebaseAuthModule.java

    Line 80 in f501fff

    private static HashMap<String, FirebaseAuth.AuthStateListener> mAuthListeners = new HashMap<>();

  • react-native-firebase/packages/auth/android/src/main/java/io/invertase/firebase/auth/ReactNativeFirebaseAuthModule.java

    Lines 103 to 115 in f501fff

    	Iterator authListenerIterator = mAuthListeners
    	.entrySet()
    	.iterator();
    	while (authListenerIterator.hasNext()) {
    	Map.Entry pair = (Map.Entry) authListenerIterator.next();
    	String appName = (String) pair.getKey();
    	FirebaseApp firebaseApp = FirebaseApp.getInstance(appName);
    	FirebaseAuth firebaseAuth = FirebaseAuth.getInstance(firebaseApp);
    	FirebaseAuth.AuthStateListener mAuthListener = (FirebaseAuth.AuthStateListener) pair.getValue();
    	firebaseAuth.removeAuthStateListener(mAuthListener);
    	authListenerIterator.remove();
    	}

  • react-native-firebase/packages/auth/android/src/main/java/io/invertase/firebase/auth/ReactNativeFirebaseAuthModule.java

    Lines 136 to 184 in f501fff

    	public void addAuthStateListener(final String appName) {
    	Log.d(TAG, "addAuthStateListener");
    	FirebaseApp firebaseApp = FirebaseApp.getInstance(appName);
    	FirebaseAuth firebaseAuth = FirebaseAuth.getInstance(firebaseApp);
    	FirebaseAuth.AuthStateListener mAuthListener = mAuthListeners.get(appName);
    	if (mAuthListener == null) {
    	FirebaseAuth.AuthStateListener newAuthListener = firebaseAuth1 -> {
    	FirebaseUser user = firebaseAuth1.getCurrentUser();
    	WritableMap eventBody = Arguments.createMap();
    	ReactNativeFirebaseEventEmitter emitter = ReactNativeFirebaseEventEmitter.getSharedInstance();
    	if (user != null) {
    	eventBody.putString("appName", appName); // for js side distribution
    	eventBody.putMap("user", firebaseUserToMap(user));
    	} else {
    	eventBody.putString("appName", appName); // for js side distribution
    	}
    	Log.d(TAG, "addAuthStateListener:eventBody " + eventBody.toString());
    	ReactNativeFirebaseEvent event = new ReactNativeFirebaseEvent(
    	"auth_state_changed",
    	eventBody,
    	appName
    	);
    	emitter.sendEvent(event);
    	};
    	firebaseAuth.addAuthStateListener(newAuthListener);
    	mAuthListeners.put(appName, newAuthListener);
    	}
    	}
    	/**
    	* Removes the current auth state listener
    	*/
    	@ReactMethod
    	public void removeAuthStateListener(String appName) {
    	Log.d(TAG, "removeAuthStateListener");
    	FirebaseApp firebaseApp = FirebaseApp.getInstance(appName);
    	FirebaseAuth firebaseAuth = FirebaseAuth.getInstance(firebaseApp);
    	FirebaseAuth.AuthStateListener mAuthListener = mAuthListeners.get(appName);
    	if (mAuthListener != null) {
    	firebaseAuth.removeAuthStateListener(mAuthListener);
    	mAuthListeners.remove(appName);
    	}
    	}

• example of testing

  react-native-firebase/packages/auth/e2e/auth.e2e.js

  Lines 461 to 503 in f501fff

  	it('stops listening when unsubscribed', async function () {
  	await firebase.auth().signInAnonymously();
  	await Utils.sleep(200);
  	// Test
  	const callback = sinon.spy();
  	let unsubscribe;
  	await new Promise(resolve => {
  	unsubscribe = firebase.auth().onUserChanged(user => {
  	callback(user);
  	resolve();
  	});
  	});
  	callback.should.be.calledWith(firebase.auth().currentUser);
  	callback.should.be.calledOnce();
  	// Sign out
  	await firebase.auth().signOut();
  	await Utils.sleep(200);
  	// Assertions
  	callback.should.be.calledWith(null);
  	// Because of the way onUserChanged works, it will be called double
  	// - once for onAuthStateChanged
  	// - once for onIdTokenChanged
  	callback.should.have.callCount(4);
  	// Unsubscribe
  	unsubscribe();
  	// Sign back in
  	await firebase.auth().signInAnonymously();
  	await Utils.sleep(200);
  	// Assertions
  	callback.should.have.callCount(4);
  	// Tear down
  	await firebase.auth().signOut();
  	});
  	});

Here is the Objective-C reference https://firebase.google.com/docs/reference/ios/firebaseinappmessaging/api/reference/Protocols/FIRInAppMessagingDisplayDelegate
Here is Java (the add listener methods are the important ones) https://firebase.google.com/docs/reference/android/com/google/firebase/inappmessaging/FirebaseInAppMessaging

[rjsajnani]

Thanks, @mikehardy will definitely check it out and try to implement it for react-native-firebase.