feat(rn) make status bar visible at all times

android/app/src/main/res/values/colors.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="colorPrimary">#17A0DB</color>
-    <color name="colorPrimaryDark">#1081B2</color>
+    <color name="navigationBarColor">#161618</color>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -2,7 +2,7 @@
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="android:forceDarkAllowed">false</item>
-        <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
+        <item name="android:navigationBarColor">@color/navigationBarColor</item>
         <item name="android:windowDisablePreview">true</item>
    </style>
 </resources>

react/features/base/modal/components/JitsiStatusBar.js

@@ -1,79 +0,0 @@
-// @flow
-
-import React, { useCallback } from 'react';
-import { StatusBar } from 'react-native';
-
-import { ColorSchemeRegistry } from '../../color-scheme';
-import { connect } from '../../redux';
-import { isDarkColor } from '../../styles';
-
-// Register style
-import '../../react/components/native/headerstyles';
-
-/**
- * Constants for the (currently) supported statusbar colors.
- */
-const STATUSBAR_DARK = 'dark-content';
-const STATUSBAR_LIGHT = 'light-content';
-
-
-type Props = {
-
-    /**
-     * The color schemed style of the component.
-     */
-    _styles: Object
-}
-
-const JitsiStatusBar = ({ _styles }: Props) => {
-
-    const getStatusBarContentColor = useCallback(() => {
-        const { statusBarContent } = _styles;
-
-        if (statusBarContent) {
-            // We have the possibility to define the statusbar color in the
-            // color scheme feature, but since mobile devices (at the moment)
-            // only support two colors (light and dark) we need to normalize
-            // the value.
-
-            if (isDarkColor(statusBarContent)) {
-                return STATUSBAR_DARK;
-            }
-
-            return STATUSBAR_LIGHT;
-        }
-
-        // The statusbar color is not defined, so we need to base our choice
-        // on the header colors
-        const { statusBar, screenHeader } = _styles;
-
-        if (isDarkColor(statusBar || screenHeader.backgroundColor)) {
-            return STATUSBAR_LIGHT;
-        }
-
-        return STATUSBAR_DARK;
-    }, [ _styles ]);
-
-    return (
-        <StatusBar
-            backgroundColor = { _styles.statusBar }
-            barStyle = { getStatusBarContentColor() }
-            translucent = { false } />
-    );
-};
-
-/**
- * Maps part of the Redux state to the props of the component.
- *
- * @param {Object} state - The Redux state.
- * @returns {{
- *     _styles: Object
- * }}
- */
-function _mapStateToProps(state) {
-    return {
-        _styles: ColorSchemeRegistry.get(state, 'Header')
-    };
-}
-
-export default connect(_mapStateToProps)(JitsiStatusBar);

react/features/conference/components/native/Conference.js

@@ -2,7 +2,7 @@
 
 import { useIsFocused } from '@react-navigation/native';
 import React, { useEffect } from 'react';
-import { BackHandler, NativeModules, SafeAreaView, StatusBar, View } from 'react-native';
+import { BackHandler, NativeModules, SafeAreaView, View } from 'react-native';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { appNavigate } from '../../../app/actions';
@@ -268,8 +268,7 @@ class Conference extends AbstractConference<Props, State> {
      */
     render() {
         const {
-            _brandingStyles,
+            _brandingStyles
-            _fullscreenEnabled
         } = this.props;
 
         return (
@@ -279,10 +278,6 @@ class Conference extends AbstractConference<Props, State> {
                     _brandingStyles
                 ] }>
                 <BrandingImageBackground />
-                <StatusBar
-                    barStyle = 'light-content'
-                    hidden = { _fullscreenEnabled }
-                    translucent = { _fullscreenEnabled } />
                 { this._renderContent() }
             </Container>
         );

react/features/mobile/navigation/components/RootNavigationContainer.js

@@ -1,6 +1,7 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import React, { useCallback } from 'react';
+import { StatusBar } from 'react-native';
 
 import { connect } from '../../../base/redux';
 import { DialInSummary } from '../../../invite';
@@ -56,6 +57,11 @@ const RootNavigationContainer = ({ dispatch, isWelcomePageAvailable }: Props) =>
             onReady = { onReady }
             ref = { rootNavigationRef }
             theme = { navigationContainerTheme }>
+            <StatusBar
+                animated = { true }
+                backgroundColor = 'transparent'
+                barStyle = { 'light-content' }
+                translucent = { true } />
             <RootStack.Navigator
                 initialRouteName = { initialRouteName }>
                 {

react/features/settings/components/native/HelpView.tsx

@@ -5,8 +5,6 @@ import React, { PureComponent } from 'react';
 import { IReduxState } from '../../../app/types';
 // @ts-ignore
 import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
-// @ts-ignore
-import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
 import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import { renderArrowBackButton }
@@ -65,12 +63,9 @@ class HelpView extends PureComponent<IProps> {
      */
     render() {
         return (
-            <>
+            <JitsiScreenWebView
-                <JitsiStatusBar />
+                source = { this.props._url }
-                <JitsiScreenWebView
+                style = { styles.screenContainer } />
-                    source = { this.props._url }
-                    style = { styles.screenContainer } />
-            </>
         );
     }
 }

react/features/settings/components/native/PrivacyView.tsx

@@ -5,8 +5,6 @@ import React, { useEffect } from 'react';
 // @ts-ignore
 import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
 // @ts-ignore
-import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
-// @ts-ignore
 import { renderArrowBackButton }
 // @ts-ignore
     from '../../../mobile/navigation/components/welcome/functions';
@@ -41,12 +39,9 @@ const PrivacyView = ({ navigation }: IProps) => {
     });
 
     return (
-        <>
+        <JitsiScreenWebView
-            <JitsiStatusBar />
+            source = { PRIVACY_URL }
-            <JitsiScreenWebView
+            style = { styles.screenContainer } />
-                source = { PRIVACY_URL }
-                style = { styles.screenContainer } />
-        </>
     );
 };
 

react/features/settings/components/native/TermsView.tsx

@@ -5,8 +5,6 @@ import React, { useEffect } from 'react';
 // @ts-ignore
 import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
 // @ts-ignore
-import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
-// @ts-ignore
 import { renderArrowBackButton }
 // @ts-ignore
     from '../../../mobile/navigation/components/welcome/functions';
@@ -41,12 +39,9 @@ const TermsView = ({ navigation }: IProps) => {
     });
 
     return (
-        <>
+        <JitsiScreenWebView
-            <JitsiStatusBar />
+            source = { TERMS_URL }
-            <JitsiScreenWebView
+            style = { styles.screenContainer } />
-                source = { TERMS_URL }
-                style = { styles.screenContainer } />
-        </>
     );
 };
 

react/features/welcome/components/WelcomePage.native.js

@@ -4,7 +4,6 @@ import { Animated, SafeAreaView, TouchableHighlight, View } from 'react-native';
 import { getName } from '../../app/functions';
 import { translate } from '../../base/i18n';
 import { Icon, IconWarning } from '../../base/icons';
-import JitsiStatusBar from '../../base/modal/components/JitsiStatusBar';
 import { LoadingIndicator, Text } from '../../base/react';
 import { connect } from '../../base/redux';
 import BaseTheme from '../../base/ui/components/BaseTheme.native';
@@ -373,7 +372,6 @@ class WelcomePage extends AbstractWelcomePage<*> {
     _renderFullUI() {
         return (
             <>
-                <JitsiStatusBar />
                 { this._renderRoomNameInput() }
                 <View style = { styles.welcomePage }>
                     <WelcomePageTabs