androidreact-nativenavigationreact-native-router-flux

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


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

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.


Solution

  • 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)
                        });