add Syntax highlighting to README

* sdk(react-native-sdk): update readme with jwt token example

android/app/build.gradle

@@ -82,7 +82,7 @@ dependencies {
 
     if (!rootProject.ext.libreBuild) {
         // Sync with react-native-google-signin
-        implementation 'com.google.android.gms:play-services-auth:19.0.2'
+        implementation 'com.google.android.gms:play-services-auth:19.2.0'
 
         // Firebase
         //  - Crashlytics

android/sdk/build.gradle

@@ -74,7 +74,7 @@ dependencies {
     }
     implementation project(':react-native-gesture-handler')
     implementation project(':react-native-get-random-values')
-    implementation project(':react-native-immersive')
+    implementation project(':react-native-immersive-mode')
     implementation project(':react-native-keep-awake')
     implementation project(':react-native-orientation-locker')
     implementation project(':react-native-pager-view')

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetView.java

@@ -26,7 +26,6 @@ import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
 import com.facebook.react.ReactRootView;
-import com.rnimmersive.RNImmersiveModule;
 
 import org.jitsi.meet.sdk.log.JitsiMeetLogger;
 
@@ -229,22 +228,4 @@ public class JitsiMeetView extends FrameLayout {
         dispose();
         super.onDetachedFromWindow();
     }
-
-    /**
-     * Called when the window containing this view gains or loses focus.
-     *
-     * @param hasFocus If the window of this view now has focus, {@code true};
-     * otherwise, {@code false}.
-     */
-    @Override
-    public void onWindowFocusChanged(boolean hasFocus) {
-        super.onWindowFocusChanged(hasFocus);
-
-        // https://github.com/mockingbot/react-native-immersive#restore-immersive-state
-        RNImmersiveModule immersive = RNImmersiveModule.getInstance();
-
-        if (hasFocus && immersive != null) {
-            immersive.emitImmersiveStateChangeEvent();
-        }
-    }
 }

android/sdk/src/main/java/org/jitsi/meet/sdk/ReactInstanceManagerHolder.java

@@ -105,7 +105,7 @@ class ReactInstanceManagerHolder {
             new com.oney.WebRTCModule.WebRTCModulePackage(),
             new com.swmansion.gesturehandler.RNGestureHandlerPackage(),
             new org.linusu.RNGetRandomValuesPackage(),
-            new com.rnimmersive.RNImmersivePackage(),
+            new com.rnimmersivemode.RNImmersiveModePackage(),
             new com.swmansion.rnscreens.RNScreensPackage(),
             new com.zmxv.RNSound.RNSoundPackage(),
             new com.th3rdwave.safeareacontext.SafeAreaContextPackage(),

android/settings.gradle

@@ -27,8 +27,8 @@ include ':react-native-giphy'
 project(':react-native-giphy').projectDir = new File(rootProject.projectDir, '../node_modules/@giphy/react-native-sdk/android')
 include ':react-native-google-signin'
 project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-google-signin/google-signin/android')
-include ':react-native-immersive'
-project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
+include ':react-native-immersive-mode'
+project(':react-native-immersive-mode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive-mode/android')
 include ':react-native-keep-awake'
 project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
 include ':react-native-orientation-locker'

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "jitsi-meet",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "jitsi-meet",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -83,7 +83,7 @@
         "react-native-dialog": "https://github.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz",
         "react-native-gesture-handler": "2.9.0",
         "react-native-get-random-values": "1.7.2",
-        "react-native-immersive": "2.0.0",
+        "react-native-immersive-mode": "2.0.1",
         "react-native-keep-awake": "4.0.0",
         "react-native-orientation-locker": "1.5.0",
         "react-native-pager-view": "5.4.9",
@@ -15807,12 +15807,12 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz",
       "integrity": "sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g=="
     },
-    "node_modules/react-native-immersive": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-immersive/-/react-native-immersive-2.0.0.tgz",
-      "integrity": "sha512-9TL05nTHN/x9sN1wbUlBoGyzH4NCuZ/7WEEUp5CvOoKuUABvdYosov0O0SAMbm/5J913RRoy98VB6tGNi9lRSw==",
+    "node_modules/react-native-immersive-mode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-immersive-mode/-/react-native-immersive-mode-2.0.1.tgz",
+      "integrity": "sha512-2wlL7VIHl4rr4gwgnUp9K1UvsN7J5VCGqoAvBWQXvB4xn7XaoDEl6z9vqaqOiEdC6aAh2d/7zqcJz+dfcR2ELw==",
       "peerDependencies": {
-        "react-native": ">=0.47.0"
+        "react-native": ">=0.60.5"
       }
     },
     "node_modules/react-native-keep-awake": {
@@ -31577,10 +31577,10 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz",
       "integrity": "sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g=="
     },
-    "react-native-immersive": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-immersive/-/react-native-immersive-2.0.0.tgz",
-      "integrity": "sha512-9TL05nTHN/x9sN1wbUlBoGyzH4NCuZ/7WEEUp5CvOoKuUABvdYosov0O0SAMbm/5J913RRoy98VB6tGNi9lRSw=="
+    "react-native-immersive-mode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-immersive-mode/-/react-native-immersive-mode-2.0.1.tgz",
+      "integrity": "sha512-2wlL7VIHl4rr4gwgnUp9K1UvsN7J5VCGqoAvBWQXvB4xn7XaoDEl6z9vqaqOiEdC6aAh2d/7zqcJz+dfcR2ELw=="
     },
     "react-native-keep-awake": {
       "version": "4.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jitsi-meet",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "A sample app for the Jitsi Videobridge",
   "repository": {
     "type": "git",
@@ -88,7 +88,7 @@
     "react-native-dialog": "https://github.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz",
     "react-native-gesture-handler": "2.9.0",
     "react-native-get-random-values": "1.7.2",
-    "react-native-immersive": "2.0.0",
+    "react-native-immersive-mode": "2.0.1",
     "react-native-keep-awake": "4.0.0",
     "react-native-orientation-locker": "1.5.0",
     "react-native-pager-view": "5.4.9",

patches/react-native-immersive+2.0.0.patch

@@ -1,19 +0,0 @@
-diff --git a/node_modules/react-native-immersive/index.js b/node_modules/react-native-immersive/index.js
-index 55dab57..110260b 100644
---- a/node_modules/react-native-immersive/index.js
-+++ b/node_modules/react-native-immersive/index.js
-@@ -18,7 +18,13 @@ const Immersive = Platform.OS === 'android' ? {
-     isListenerEnabled = true
-     RNImmersive.addImmersiveListener()
-   },
--  removeImmersiveListener: (listener) => DeviceEventEmitter.removeListener('@@IMMERSIVE_STATE_CHANGED', listener)
-+    removeImmersiveListener: (listener) => {
-+        const immersiveListener = DeviceEventEmitter.addListener('@@IMMERSIVE_STATE_CHANGED', listener);
-+
-+        return () => {
-+            immersiveListener.remove();
-+        }
-+    }
- } : {
-   on: unSupportedError,
-   off: unSupportedError,

react-native-sdk/README.md

@@ -2,20 +2,23 @@
 
 
 ## Installation
-Inside your project, run `npm i @jitsi/react-native-sdk`.<br/><br/>Additionally, if not already installed, some dependencies will need to be added.
+Inside your project, run;
+```console
+npm i @jitsi/react-native-sdk
+```
+<br/><br/>Additionally, if not already installed, some dependencies will need to be added.
 
 This can be done by running the following script:
-```
-"update-deps": "node node_modules/@jitsi/react-native-sdk/update_dependencies.js"
+```console
+node node_modules/@jitsi/react-native-sdk/update_dependencies.js
 ```
 This will check and update all your dependencies.<br/><br/>
 
-
  [comment]: # (These deps definitely need to be added manually, more could be neccesary)
 
 Because of SVG use in react native, you need to update metro.config your project's file:
 
-```
+```javascript
 const { getDefaultConfig } = require('metro-config');
 
 module.exports = (async () => {
@@ -56,31 +59,31 @@ module.exports = (async () => {
         - Audio
         - Voice over IP
         - Background fetch
-- Add Copy Sounds step:
-1. Open XCode, go to Build Phases and add this step and the script below.
 
+Run;
+```console
+cd ios && pod install && cd ..
 ```
-    SOUNDS_DIR="${PROJECT_DIR}/../node_modules/@jitsi/react-native-sdk/sounds"
-    cp $SOUNDS_DIR/* ${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/
-```
-#### Podfile
-- At the beginning of your target step add `pod 'ObjectiveDropboxOfficial', :modular_headers => true`
-
-Run `cd ios && pod install && cd ..`
 
 ### Android
 
 - In your build.gradle have at least `minSdkVersion = 24`
-- TODO: HOW TO ADD COPY SOUNDS STEP
 - In `android/app/src/debug/AndroidManifest.xml` and `android/app/src/main/AndroidManifest.xml`, under the `</application>` tag, include
-  ```
+  ```xml
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.CAMERA" />
   ```
 
-### TODOS
-- Ref ConnectionService to not rely on ReactInstanceHolder anymore
-- Add Copy Sounds step to build.gradle
-- Include copy sounds step in podspec (if possible)
-- Add ranges for dependencies
-- Add Build_Config for react native to AppInfoModule
+If you want to test all the steps before applying them to your app, you can check our React Native SDK sample app here:
+https://github.com/jitsi/jitsi-meet-sdk-samples/tree/master/react-native
+
+
+### Using JWT tokens
+- If you are planning to use tokens you can update your domain and room name inside meeting options.
+- For example:
+```javascript
+  const meetingOptions = {
+     domain: 'YOUR_DOMAIN',
+     roomName: 'ROOM_NAME?jwt=JWT_TOKEN'
+  }
+```

react-native-sdk/package-lock.json

@@ -28,7 +28,7 @@
                 "js-md5": "0.6.1",
                 "js-sha512": "0.8.0",
                 "jwt-decode": "2.2.0",
-                "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1659.0.0+5d322ea5/lib-jitsi-meet.tgz",
+                "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1662.0.0+6c4381c8/lib-jitsi-meet.tgz",
                 "lodash": "4.17.21",
                 "moment": "2.29.4",
                 "moment-duration-format": "2.2.2",
@@ -68,7 +68,7 @@
                 "react-native-device-info": "8.4.8",
                 "react-native-gesture-handler": "2.9.0",
                 "react-native-get-random-values": "1.7.2",
-                "react-native-immersive": "2.0.0",
+                "react-native-immersive-mode": "2.0.1",
                 "react-native-keep-awake": "4.0.0",
                 "react-native-orientation-locker": "https://git@github.com/wonday/react-native-orientation-locker#f483520ea6b64b97002374a9e9f053a5299a062a",
                 "react-native-pager-view": "5.4.9",
@@ -960,10 +960,10 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/async": {
-            "version": "3.2.3",
-            "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
-            "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g=="
+        "node_modules/async-es": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/async-es/-/async-es-3.2.4.tgz",
+            "integrity": "sha512-GFHAAfmW7GzEiHFR6DvE5WMm6+js9pb+RLm+m1UpsyMX+I4j/R4QVw2Te664q+fvDVOz7Y0bORPDNvQS7BJ3Hw=="
         },
         "node_modules/at-least-node": {
             "version": "1.0.0",
@@ -2443,8 +2443,8 @@
         },
         "node_modules/lib-jitsi-meet": {
             "version": "0.0.0",
-            "resolved": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1659.0.0+5d322ea5/lib-jitsi-meet.tgz",
-            "integrity": "sha512-kTBN3NlI3RLxeQeq5uppU557kJPQWwFMq1NweGr0CH8TCJdnKt30Lqx/X+DGP7Js6286JDmpg4EWZa9wW7lLXQ==",
+            "resolved": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1662.0.0+6c4381c8/lib-jitsi-meet.tgz",
+            "integrity": "sha512-jEQv0imqSPHowBOsd8178fPLUNTj0SavUQnWJIjEjFW4kE4KA+jBlU2C9qryEFwqJ2NjFo7md6H/xz8u+tW1mA==",
             "hasInstallScript": true,
             "license": "Apache-2.0",
             "dependencies": {
@@ -2452,7 +2452,7 @@
                 "@jitsi/logger": "2.0.0",
                 "@jitsi/sdp-interop": "git+https://github.com/jitsi/sdp-interop#3d49eb4aa26863a3f8d32d7581cdb4321244266b",
                 "@jitsi/sdp-simulcast": "0.4.0",
-                "async": "3.2.3",
+                "async-es": "3.2.4",
                 "base64-js": "1.3.1",
                 "current-executing-script": "0.1.3",
                 "jquery": "3.6.1",
@@ -4318,10 +4318,10 @@
                 "is-string": "^1.0.7"
             }
         },
-        "async": {
-            "version": "3.2.3",
-            "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
-            "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g=="
+        "async-es": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/async-es/-/async-es-3.2.4.tgz",
+            "integrity": "sha512-GFHAAfmW7GzEiHFR6DvE5WMm6+js9pb+RLm+m1UpsyMX+I4j/R4QVw2Te664q+fvDVOz7Y0bORPDNvQS7BJ3Hw=="
         },
         "at-least-node": {
             "version": "1.0.0",
@@ -5349,14 +5349,14 @@
             }
         },
         "lib-jitsi-meet": {
-            "version": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1659.0.0+5d322ea5/lib-jitsi-meet.tgz",
-            "integrity": "sha512-kTBN3NlI3RLxeQeq5uppU557kJPQWwFMq1NweGr0CH8TCJdnKt30Lqx/X+DGP7Js6286JDmpg4EWZa9wW7lLXQ==",
+            "version": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1662.0.0+6c4381c8/lib-jitsi-meet.tgz",
+            "integrity": "sha512-jEQv0imqSPHowBOsd8178fPLUNTj0SavUQnWJIjEjFW4kE4KA+jBlU2C9qryEFwqJ2NjFo7md6H/xz8u+tW1mA==",
             "requires": {
                 "@jitsi/js-utils": "2.0.0",
                 "@jitsi/logger": "2.0.0",
                 "@jitsi/sdp-interop": "git+https://github.com/jitsi/sdp-interop#3d49eb4aa26863a3f8d32d7581cdb4321244266b",
                 "@jitsi/sdp-simulcast": "0.4.0",
-                "async": "3.2.3",
+                "async-es": "3.2.4",
                 "base64-js": "1.3.1",
                 "current-executing-script": "0.1.3",
                 "jquery": "3.6.1",

react-native-sdk/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jitsi/react-native-sdk",
-    "version": "0.1.0",
+    "version": "0.2.1",
     "description": "React Native SDK for Jitsi Meet.",
     "main": "index.tsx",
     "license": "Apache-2.0",
@@ -29,7 +29,7 @@
         "js-md5": "0.6.1",
         "js-sha512": "0.8.0",
         "jwt-decode": "2.2.0",
-        "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1659.0.0+5d322ea5/lib-jitsi-meet.tgz",
+        "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1662.0.0+6c4381c8/lib-jitsi-meet.tgz",
         "lodash": "4.17.21",
         "moment": "2.29.4",
         "moment-duration-format": "2.2.2",
@@ -69,7 +69,7 @@
         "react-native-device-info": "8.4.8",
         "react-native-get-random-values": "1.7.2",
         "react-native-gesture-handler": "2.9.0",
-        "react-native-immersive": "2.0.0",
+        "react-native-immersive-mode": "2.0.1",
         "react-native-keep-awake": "4.0.0",
         "react-native-pager-view": "5.4.9",
         "react-native-paper": "4.11.1",
@@ -98,4 +98,4 @@
     "keywords": [
         "react-native"
     ]
-}
+}

react/features/mobile/background/middleware.native.ts

@@ -1,5 +1,4 @@
 import { AppState } from 'react-native';
-import { AnyAction } from 'redux';
 
 import { IStore } from '../../app/types';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app/actionTypes';
@@ -23,12 +22,12 @@ MiddlewareRegistry.register(store => next => action => {
     case APP_WILL_MOUNT: {
         const { dispatch } = store;
 
-        _setAppStateListener(store, next, action, _onAppStateChange.bind(undefined, dispatch));
+        _setAppStateListener(store, _onAppStateChange.bind(undefined, dispatch));
         break;
     }
 
     case APP_WILL_UNMOUNT:
-        _setAppStateListener(store, next, action, undefined);
+        _setAppStateListener(store, undefined);
         break;
     }
 
@@ -55,20 +54,14 @@ function _onAppStateChange(dispatch: IStore['dispatch'], appState: string) {
  *
  * @param {Store} store - The redux store in which the specified action is being
  * dispatched.
- * @param {Dispatch} next - The redux dispatch function to dispatch the
- * specified action to the specified store.
- * @param {Action} action - The redux action {@code _SET_IMMERSIVE_LISTENER}
- * which is being dispatched in the specified store.
  * @param {any} listener - Listener for app state status.
  * @private
  * @returns {Object} The value returned by {@code next(action)}.
  */
-function _setAppStateListener({ dispatch, getState }: IStore, next: Function, action: AnyAction, listener: any) {
+function _setAppStateListener({ dispatch, getState }: IStore, listener: any) {
     const { subscription } = getState()['features/background'];
-    const result = next(action);
 
     subscription?.remove();
-    listener && dispatch(_setAppStateSubscription(AppState.addEventListener('change', listener)));
 
-    return result;
+    dispatch(_setAppStateSubscription(listener ? AppState.addEventListener('change', listener) : undefined));
 }

react/features/mobile/full-screen/actionTypes.ts

@@ -1,12 +1,12 @@
 /**
  * The type of (redux) action to set the react-native-immersive's change event
- * listener.
+ * subscription.
  *
  * {
- *     type: _SET_IMMERSIVE_LISTENER,
- *     listener: Function
+ *     type: _SET_IMMERSIVE_SUBSCRIPTION,
+ *     subscription: Function
  * }
  *
  * @protected
  */
-export const _SET_IMMERSIVE_LISTENER = '_SET_IMMERSIVE_LISTENER';
+export const _SET_IMMERSIVE_SUBSCRIPTION = '_SET_IMMERSIVE_SUBSCRIPTION';

react/features/mobile/full-screen/actions.ts

@@ -1,19 +1,21 @@
-import { _SET_IMMERSIVE_LISTENER } from './actionTypes';
+import { NativeEventSubscription } from 'react-native';
+
+import { _SET_IMMERSIVE_SUBSCRIPTION } from './actionTypes';
 
 /**
  * Sets the change event listener to be used with react-native-immersive's API.
  *
- * @param {Function} [listener] - The function to be used with
+ * @param {Function} subscription - The function to be used with
  * react-native-immersive's API as the change event listener.
  * @protected
  * @returns {{
- *     type: _SET_IMMERSIVE_LISTENER,
- *     listener: ?Function
+ *     type: _SET_IMMERSIVE_SUBSCRIPTION,
+ *     subscription: ?NativeEventSubscription
  * }}
  */
-export function _setImmersiveListener(listener?: Function) {
+export function _setImmersiveSubscription(subscription?: NativeEventSubscription) {
     return {
-        type: _SET_IMMERSIVE_LISTENER,
-        listener
+        type: _SET_IMMERSIVE_SUBSCRIPTION,
+        subscription
     };
 }

react/features/mobile/full-screen/logger.ts

@@ -0,0 +1,3 @@
+import { getLogger } from '../../base/logging/functions';
+
+export default getLogger('features/full-screen');

react/features/mobile/full-screen/middleware.ts

@@ -1,6 +1,4 @@
-// @ts-expect-error
-import { Immersive } from 'react-native-immersive';
-import { AnyAction } from 'redux';
+import ImmersiveMode from 'react-native-immersive-mode';
 
 import { IStore } from '../../app/types';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app/actionTypes';
@@ -8,12 +6,18 @@ import { getCurrentConference } from '../../base/conference/functions';
 import { isAnyDialogOpen } from '../../base/dialog/functions';
 import { FULLSCREEN_ENABLED } from '../../base/flags/constants';
 import { getFeatureFlag } from '../../base/flags/functions';
-import Platform from '../../base/react/Platform.native';
 import MiddlewareRegistry from '../../base/redux/MiddlewareRegistry';
 import StateListenerRegistry from '../../base/redux/StateListenerRegistry';
 
-import { _SET_IMMERSIVE_LISTENER } from './actionTypes';
-import { _setImmersiveListener as _setImmersiveListenerA } from './actions';
+import { _setImmersiveSubscription } from './actions';
+import logger from './logger';
+
+type BarVisibilityType = {
+    navigationBottomBar: boolean;
+    statusBar: boolean;
+};
+
+type ImmersiveListener = (visibility: BarVisibilityType) => void;
 
 /**
  * Middleware that captures conference actions and activates or deactivates the
@@ -28,20 +32,14 @@ import { _setImmersiveListener as _setImmersiveListenerA } from './actions';
  */
 MiddlewareRegistry.register(store => next => action => {
     switch (action.type) {
-    case _SET_IMMERSIVE_LISTENER:
-        return _setImmersiveListenerF(store, next, action);
-
     case APP_WILL_MOUNT: {
-        const result = next(action);
+        _setImmersiveListener(store, _onImmersiveChange.bind(undefined, store));
 
-        store.dispatch(
-            _setImmersiveListenerA(_onImmersiveChange.bind(undefined, store)));
-
-        return result;
+        break;
     }
 
     case APP_WILL_UNMOUNT:
-        store.dispatch(_setImmersiveListenerA(undefined));
+        _setImmersiveListener(store, undefined);
         break;
 
     }
@@ -95,11 +93,9 @@ function _onImmersiveChange({ getState }: IStore) {
  * @returns {void}
  */
 function _setFullScreen(fullScreen: boolean) {
-    // XXX The React Native module Immersive is only implemented on Android and
-    // throws on other platforms.
-    if (Platform.OS === 'android') {
-        fullScreen ? Immersive.on() : Immersive.off();
-    }
+    logger.info(`Setting full-screen mode: ${fullScreen}`);
+    ImmersiveMode.fullLayout(fullScreen);
+    ImmersiveMode.setBarMode(fullScreen ? 'Full' : 'Normal');
 }
 
 /**
@@ -109,29 +105,14 @@ function _setFullScreen(fullScreen: boolean) {
  *
  * @param {Store} store - The redux store in which the specified action is being
  * dispatched.
- * @param {Dispatch} next - The redux dispatch function to dispatch the
- * specified action to the specified store.
- * @param {Action} action - The redux action {@code _SET_IMMERSIVE_LISTENER}
- * which is being dispatched in the specified store.
+ * @param {Function} listener - Listener for immersive state.
  * @private
  * @returns {Object} The value returned by {@code next(action)}.
  */
-function _setImmersiveListenerF({ getState }: IStore, next: Function, action: AnyAction) {
-    // XXX The React Native module Immersive is only implemented on Android and
-    // throws on other platforms.
-    if (Platform.OS === 'android') {
-        // Remove the old Immersive listener and add the new one.
-        const { listener: oldListener } = getState()['features/full-screen'];
-        const result = next(action);
-        const { listener: newListener } = getState()['features/full-screen'];
+function _setImmersiveListener({ dispatch, getState }: IStore, listener?: ImmersiveListener) {
+    const { subscription } = getState()['features/full-screen'];
 
-        if (oldListener !== newListener) {
-            oldListener && Immersive.removeImmersiveListener(oldListener);
-            newListener && Immersive.addImmersiveListener(newListener);
-        }
+    subscription?.remove();
 
-        return result;
-    }
-
-    return next(action);
+    dispatch(_setImmersiveSubscription(listener ? ImmersiveMode.addEventListener(listener) : undefined));
 }

react/features/mobile/full-screen/reducer.ts

@@ -1,17 +1,19 @@
+import { NativeEventSubscription } from 'react-native';
+
 import ReducerRegistry from '../../base/redux/ReducerRegistry';
 
-import { _SET_IMMERSIVE_LISTENER } from './actionTypes';
+import { _SET_IMMERSIVE_SUBSCRIPTION } from './actionTypes';
 
 export interface IFullScreenState {
-    listener?: Function;
+    subscription?: NativeEventSubscription;
 }
 
 ReducerRegistry.register<IFullScreenState>('features/full-screen', (state = {}, action): IFullScreenState => {
     switch (action.type) {
-    case _SET_IMMERSIVE_LISTENER:
+    case _SET_IMMERSIVE_SUBSCRIPTION:
         return {
             ...state,
-            listener: action.listener
+            subscription: action.subscription
         };
     }