From c83c4488bfdb8bc03da97b142291c94d97c83e11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Mon, 31 Jul 2023 15:39:08 +0200
Subject: [PATCH] feat(rnsdk) share bootsrap code with app

---
 react-native-sdk/index.tsx                   | 16 +++++-----------
 react/bootstrap.native.js                    |  7 +++++++
 react/features/app/components/App.native.tsx | 15 +++++++++++++++
 react/index.native.js                        | 15 +++------------
 4 files changed, 30 insertions(+), 23 deletions(-)
 create mode 100644 react/bootstrap.native.js

diff --git a/react-native-sdk/index.tsx b/react-native-sdk/index.tsx
index 8efa9ebb77..d03d64be90 100644
--- a/react-native-sdk/index.tsx
+++ b/react-native-sdk/index.tsx
@@ -1,10 +1,7 @@
 /* eslint-disable lines-around-comment,  no-undef, no-unused-vars  */
 
-import 'react-native-gesture-handler';
-// Apply all necessary polyfills as early as possible
-// to make sure anything imported henceforth sees them.
-import 'react-native-get-random-values';
-import './react/features/mobile/polyfills';
+// NB: This import must always come first.
+import './react/bootstrap.native';
 
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { View, ViewStyle } from 'react-native';
@@ -12,7 +9,6 @@ import { View, ViewStyle } from 'react-native';
 import { appNavigate } from './react/features/app/actions.native';
 import { App } from './react/features/app/components/App.native';
 import { setAudioMuted, setVideoMuted } from './react/features/base/media/actions';
-import JitsiThemePaperProvider from './react/features/base/ui/components/JitsiThemeProvider.native';
 
 
 interface IEventListeners {
@@ -117,11 +113,9 @@ export const JitsiMeeting = forwardRef((props: IAppProps, ref) => {
 
     return (
         <View style = { style as ViewStyle }>
-            <JitsiThemePaperProvider>
-                <App
-                    { ...appProps }
-                    ref = { app } />
-            </JitsiThemePaperProvider>
+            <App
+                { ...appProps }
+                ref = { app } />
         </View>
     );
 });
diff --git a/react/bootstrap.native.js b/react/bootstrap.native.js
new file mode 100644
index 0000000000..f60ccf8216
--- /dev/null
+++ b/react/bootstrap.native.js
@@ -0,0 +1,7 @@
+// https://github.com/software-mansion/react-native-gesture-handler/issues/320#issuecomment-443815828
+import 'react-native-gesture-handler';
+
+// Apply all necessary polyfills as early as possible to make sure anything imported henceforth
+// sees them.
+import 'react-native-get-random-values';
+import './features/mobile/polyfills';
diff --git a/react/features/app/components/App.native.tsx b/react/features/app/components/App.native.tsx
index a7487884b3..f54d330f20 100644
--- a/react/features/app/components/App.native.tsx
+++ b/react/features/app/components/App.native.tsx
@@ -12,6 +12,7 @@ import { getFeatureFlag } from '../../base/flags/functions';
 import { clientResized, setSafeAreaInsets } from '../../base/responsive-ui/actions';
 import DimensionsDetector from '../../base/responsive-ui/components/DimensionsDetector.native';
 import { updateSettings } from '../../base/settings/actions';
+import JitsiThemePaperProvider from '../../base/ui/components/JitsiThemeProvider.native';
 import { _getRouteToRender } from '../getRouteToRender.native';
 import logger from '../logger';
 
@@ -89,6 +90,20 @@ export class App extends AbstractApp<IProps> {
         logger.info(`Loaded SDK ${AppInfo.sdkVersion}${liteTxt}`);
     }
 
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <JitsiThemePaperProvider>
+                { super.render() }
+            </JitsiThemePaperProvider>
+        );
+    }
+
     /**
      * Initializes feature flags and updates settings.
      *
diff --git a/react/index.native.js b/react/index.native.js
index 7afea6ff17..ea8ce4e13c 100644
--- a/react/index.native.js
+++ b/react/index.native.js
@@ -1,17 +1,11 @@
-// https://github.com/software-mansion/react-native-gesture-handler/issues/320#issuecomment-443815828
-import 'react-native-gesture-handler';
-
-// Apply all necessary polyfills as early as possible to make sure anything imported henceforth
-// sees them.
-import 'react-native-get-random-values';
-import './features/mobile/polyfills';
+// NB: This import must always come first.
+import './bootstrap.native';
 
 import React, { PureComponent } from 'react';
 import { AppRegistry } from 'react-native';
 
 import { App } from './features/app/components/App.native';
 import { _initLogging } from './features/base/logging/functions';
-import JitsiThemePaperProvider from './features/base/ui/components/JitsiThemeProvider';
 
 /**
  * React Native doesn't support specifying props to the main/root component (in
@@ -29,10 +23,7 @@ class Root extends PureComponent {
      */
     render() {
         return (
-            <JitsiThemePaperProvider>
-                <App
-                    { ...this.props } />
-            </JitsiThemePaperProvider>
+            <App { ...this.props } />
         );
     }
 }