TransWikia.com

How to keep up-to-date between RN and Native Android Screen about current stack?

Stack Overflow Asked by Balasubramanian on November 15, 2021

I’m triggering android activity FullScreenActivity whenever video notification comes into the app. This screen display on top of react-native. But I don’t want to trigger this FullScreenActivity when user is on a specific screen of react-native.

we have same feature coded on RN and android. I want to achieve

  • when app is foreground and not in RN specific screen, FullScreenActivity should trigger.
  • when app is foreground and in RN specific screen, FullScreenActivity should not trigger and call RN scene instead.
  • when app is background or killed, FullScreenActivity should trigger.

Scenario:

  1. user is in screen 1 -> got notification -> now trigger FullScreenActivity.
  2. How to handle if user moves to screen 2 (doesn’t trigger if in screen 2) while the above step in progress?

How android know user in the specific screen of RN and how RN should know FullScreenActivity is currently active? I want to make one / two-way communication between both platforms.

3 Answers

You should make two-way communication between platforms. I assume you know how to create and register your native modules in Android.

React-Native -> Android communication.

Native code:

@ReactMethod
public void setCurrentScreen(String screen) {
}

In JS code, you can attach navigation listener to your Router via setting onStateChange prop and calling YourNativeModule.setCurrentScreen() method.

Android -> React-Native communication:

Just send an event from FullScreenActivity to JS with activity state information and subscribe to events in JS.

    override fun onStart() {
        super.onStart()
        sendActivityStartedEvent()
    }

    override fun onStop() {
        sendActivityStoppedEvent()
        super.onStop()
    }

    private fun sendActivityStartedEvent() {
        val params = Arguments.createMap()
        params.putBoolean("active", true)
        sendEvent("activityState", params)
    }

    private fun sendActivityStoppedEvent() {
        val params = Arguments.createMap()
        params.putBoolean("active", false)
        sendEvent("activityState", params)
    }

    private fun sendEvent(eventName: String, params: WritableMap?) {
        reactNativeHost.reactInstanceManager.currentReactContext
                ?.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
                ?.emit(eventName, params)
    }

In order to access reactNativeHost your FullScreenActivity must be instance of ReactActivity

JS code:

this.subscription = DeviceEventEmitter.addListener('activityState', event => {
                     console.log(event.active)
                    });

Answered by Vadim Goroshevsky on November 15, 2021

You need to create a native module with two-way binding with:

  • A function that RN calls on android, invoked every time the user change a react native screen

  • When you receive a video notification, you check the current screen and decide if the FullScreenActivity should be shown or not

  • An event emitted by the native module every time the FullScreenActivity shows/hides, and react-native can subscribe to it

when app is background or killed, FullScreenActivity should trigger.

I don't understand the question, You can't present/hide/do stuff when your app is killed

Answered by gbalduzzi on November 15, 2021

If I understand correctly, you can use Actions.

import {Actions} from 'react-native-router-flux';

Actions.currentScene;

Actions.currentScene gives you the active scene.

Answered by İlker on November 15, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP