feat(rn,ui) get rid of the gradients

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

@@ -178,7 +178,6 @@ class ReactInstanceManagerHolder {
 
         List<ReactPackage> packages
             = new ArrayList<>(Arrays.asList(
-                new com.BV.LinearGradient.LinearGradientPackage(),
                 new com.calendarevents.CalendarEventsPackage(),
                 new com.corbt.keepawake.KCKeepAwakePackage(),
                 new com.facebook.react.shell.MainReactPackage(),

ios/Podfile

@@ -61,7 +61,6 @@ target 'JitsiMeetSDK' do
   pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
   pod 'react-native-webview', :path => '../node_modules/react-native-webview'
   pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'
-  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
   pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-async-storage/async-storage'
   pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
   pod 'RNGoogleSignin', :path => '../node_modules/@react-native-community/google-signin'

ios/Podfile.lock

@@ -5,8 +5,6 @@ PODS:
   - AppAuth/Core (1.2.0)
   - AppAuth/ExternalUserAgent (1.2.0)
   - boost-for-react-native (1.63.0)
-  - BVLinearGradient (2.5.6):
-    - React
   - CocoaLumberjack (3.5.3):
     - CocoaLumberjack/Core (= 3.5.3)
   - CocoaLumberjack/Core (3.5.3)
@@ -371,7 +369,6 @@ PODS:
   - Yoga (1.14.0)
 
 DEPENDENCIES:
-  - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
   - CocoaLumberjack (~> 3.5.3)
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector/`)
@@ -442,8 +439,6 @@ SPEC REPOS:
     - PromisesObjC
 
 EXTERNAL SOURCES:
-  BVLinearGradient:
-    :path: "../node_modules/react-native-linear-gradient"
   DoubleConversion:
     :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   FBLazyVector:
@@ -526,7 +521,6 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   AppAuth: bce82c76043657c99d91e7882e8a9e1a93650cd4
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   CocoaLumberjack: 2f44e60eb91c176d471fdba43b9e3eae6a721947
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
   FBLazyVector: ca7f56c8ff6cd8590f7a673d7903b06019805581
@@ -584,6 +578,6 @@ SPEC CHECKSUMS:
   RNWatch: a5320c959c75e72845c07985f3e935e58998f1d3
   Yoga: 96b469c5e81ff51b917b92e8c3390642d4ded30c
 
-PODFILE CHECKSUM: 5be5132e41831a98362eeed760558227a4df89ae
+PODFILE CHECKSUM: d059cebf82da14a53940a16c24c3330752d4b0c8
 
 COCOAPODS: 1.10.1

package-lock.json

@@ -13956,11 +13956,6 @@
       "resolved": "https://registry.npmjs.org/react-native-keep-awake/-/react-native-keep-awake-4.0.0.tgz",
       "integrity": "sha512-0Fotox+eLXQooeibVs3P60yASYUWjtRw9MZNmbuHt5UZQrgUrAKsE4jm7gTr4tPU1m1RkwGzcgUFpcOkh/ec7g=="
     },
-    "react-native-linear-gradient": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz",
-      "integrity": "sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg=="
-    },
     "react-native-sound": {
       "version": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
       "from": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190"

package.json

@@ -76,7 +76,6 @@
     "react-native-device-info": "8.0.0",
     "react-native-immersive": "2.0.0",
     "react-native-keep-awake": "4.0.0",
-    "react-native-linear-gradient": "2.5.6",
     "react-native-sound": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
     "react-native-splash-screen": "3.2.0",
     "react-native-svg": "12.1.0",

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

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { NativeModules, SafeAreaView, StatusBar } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
 
 import { appNavigate } from '../../../app/actions';
 import { PIP_ENABLED, FULLSCREEN_ENABLED, getFeatureFlag } from '../../../base/flags';
@@ -37,7 +36,7 @@ import type { AbstractProps } from '../AbstractConference';
 import Labels from './Labels';
 import LonelyMeetingExperience from './LonelyMeetingExperience';
 import NavigationBar from './NavigationBar';
-import styles, { NAVBAR_GRADIENT_COLORS } from './styles';
+import styles from './styles';
 
 
 /**
@@ -238,17 +237,11 @@ class Conference extends AbstractConference<Props, *> {
      */
     _renderContent() {
         const {
-            _aspectRatio,
             _connecting,
-            _filmstripVisible,
             _largeVideoParticipantId,
             _reducedUI,
-            _shouldDisplayTileView,
+            _shouldDisplayTileView
-            _toolboxVisible
         } = this.props;
-        const showGradient = _toolboxVisible;
-        const applyGradientStretching
-            = _filmstripVisible && _aspectRatio === ASPECT_RATIO_NARROW && !_shouldDisplayTileView;
 
         if (_reducedUI) {
             return this._renderContentForReducedUi();
@@ -284,22 +277,6 @@ class Conference extends AbstractConference<Props, *> {
                     pointerEvents = 'box-none'
                     style = { styles.toolboxAndFilmstripContainer }>
 
-                    { showGradient && <LinearGradient
-                        colors = { NAVBAR_GRADIENT_COLORS }
-                        end = {{
-                            x: 0.0,
-                            y: 0.0
-                        }}
-                        pointerEvents = 'none'
-                        start = {{
-                            x: 0.0,
-                            y: 1.0
-                        }}
-                        style = { [
-                            styles.bottomGradient,
-                            applyGradientStretching ? styles.gradientStretchBottom : undefined
-                        ] } />}
-
                     <Labels />
 
                     <Captions onPress = { this._onClick } />

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

@@ -1,8 +1,7 @@
 // @flow
 
-import React, { Component } from 'react';
+import React from 'react';
-import { SafeAreaView, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
 
 import { getConferenceName } from '../../../base/conference';
 import { getFeatureFlag, CONFERENCE_TIMER_ENABLED, MEETING_NAME_ENABLED } from '../../../base/flags';
@@ -11,7 +10,8 @@ import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
 import { isToolboxVisible } from '../../../toolbox/functions.native';
 import ConferenceTimer from '../ConferenceTimer';
 
-import styles, { NAVBAR_GRADIENT_COLORS } from './styles';
+import styles from './styles';
+
 
 type Props = {
 
@@ -39,54 +39,39 @@ type Props = {
 /**
  * Implements a navigation bar component that is rendered on top of the
  * conference screen.
+ *
+ * @param {Props} props - The React props passed to this component.
+ * @returns {React.Node}
  */
-class NavigationBar extends Component<Props> {
+const NavigationBar = (props: Props) => {
-    /**
+    if (!props._visible) {
-     * Implements {@Component#render}.
+        return null;
-     *
-     * @inheritdoc
-     */
-    render() {
-        if (!this.props._visible) {
-            return null;
-        }
-
-        return [
-            <LinearGradient
-                colors = { NAVBAR_GRADIENT_COLORS }
-                key = { 1 }
-                pointerEvents = 'none'
-                style = { styles.gradient }>
-                <SafeAreaView>
-                    <View style = { styles.gradientStretchTop } />
-                </SafeAreaView>
-            </LinearGradient>,
-            <View
-                key = { 2 }
-                pointerEvents = 'box-none'
-                style = { styles.navBarWrapper }>
-                <PictureInPictureButton
-                    styles = { styles.navBarButton } />
-                <View
-                    pointerEvents = 'box-none'
-                    style = { styles.roomNameWrapper }>
-                    {
-                        this.props._meetingNameEnabled
-                        && <Text
-                            numberOfLines = { 1 }
-                            style = { styles.roomName }>
-                            { this.props._meetingName }
-                        </Text>
-                    }
-                    {
-                        this.props._conferenceTimerEnabled && <ConferenceTimer />
-                    }
-                </View>
-            </View>
-        ];
     }
 
-}
+    return (
+        <View
+            pointerEvents = 'box-none'
+            style = { styles.navBarWrapper }>
+            <PictureInPictureButton
+                styles = { styles.navBarButton } />
+            <View
+                pointerEvents = 'box-none'
+                style = { styles.roomNameWrapper }>
+                {
+                    props._meetingNameEnabled
+                    && <Text
+                        numberOfLines = { 1 }
+                        style = { styles.roomName }>
+                        { props._meetingName }
+                    </Text>
+                }
+                {
+                    props._conferenceTimerEnabled && <ConferenceTimer />
+                }
+            </View>
+        </View>
+    );
+};
 
 /**
  * Maps part of the Redux store to the props of this component.

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

@@ -2,28 +2,13 @@ import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
 import { BoxModel, ColorPalette, fixAndroidViewClipping } from '../../../base/styles';
 import { FILMSTRIP_SIZE } from '../../../filmstrip';
 
-export const NAVBAR_GRADIENT_COLORS = [ '#000000FF', '#00000000' ];
 export const INSECURE_ROOM_NAME_LABEL_COLOR = ColorPalette.warning;
 
-// From brand guideline
-const BOTTOM_GRADIENT_HEIGHT = 290;
-const DEFAULT_GRADIENT_SIZE = 140;
-
 /**
  * The styles of the feature conference.
  */
 export default {
 
-    bottomGradient: {
-        bottom: 0,
-        flexDirection: 'column',
-        justifyContent: 'flex-end',
-        minHeight: DEFAULT_GRADIENT_SIZE,
-        left: 0,
-        position: 'absolute',
-        right: 0
-    },
-
     /**
      * {@code Conference} style.
      */
@@ -37,22 +22,6 @@ export default {
         margin: 10
     },
 
-    gradient: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        flex: 1
-    },
-
-    gradientStretchBottom: {
-        height: BOTTOM_GRADIENT_HEIGHT
-    },
-
-    gradientStretchTop: {
-        height: DEFAULT_GRADIENT_SIZE
-    },
-
     /**
      * View that contains the indicators.
      */

react/features/mobile/incoming-call/components/IncomingCallPage.js

@@ -2,7 +2,6 @@
 
 import React, { Component } from 'react';
 import { Image, Text, View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
 
 import { Avatar } from '../../../base/avatar';
 import { translate } from '../../../base/i18n';
@@ -10,11 +9,7 @@ import { connect } from '../../../base/redux';
 
 import AnswerButton from './AnswerButton';
 import DeclineButton from './DeclineButton';
-import styles, {
+import styles, { CALLER_AVATAR_SIZE } from './styles';
-    AVATAR_BORDER_GRADIENT,
-    BACKGROUND_OVERLAY_GRADIENT,
-    CALLER_AVATAR_SIZE
-} from './styles';
 
 /**
  * The type of React {@code Component} props of {@link IncomingCallPage}.
@@ -66,9 +61,6 @@ class IncomingCallPage extends Component<Props> {
                         source = {{ uri: this.props._callerAvatarURL }}
                         style = { styles.backgroundAvatarImage } />
                 </View>
-                <LinearGradient
-                    colors = { BACKGROUND_OVERLAY_GRADIENT }
-                    style = { styles.backgroundOverlayGradient } />
                 <Text style = { styles.title }>
                     { callTitle }
                 </Text>
@@ -124,9 +116,6 @@ class IncomingCallPage extends Component<Props> {
     _renderCallerAvatar() {
         return (
             <View style = { styles.avatarContainer }>
-                <LinearGradient
-                    colors = { AVATAR_BORDER_GRADIENT }
-                    style = { styles.avatarBorder } />
                 <View style = { styles.avatar }>
                     <Avatar
                         size = { CALLER_AVATAR_SIZE }

react/features/mobile/incoming-call/components/styles.js

@@ -1,9 +1,5 @@
 import { ColorPalette, createStyleSheet } from '../../../base/styles';
 
-export const AVATAR_BORDER_GRADIENT = [ '#4C9AFF', '#0052CC' ];
-
-export const BACKGROUND_OVERLAY_GRADIENT = [ '#0052CC', '#4C9AFF' ];
-
 const BUTTON_SIZE = 56;
 
 const CALLER_AVATAR_BORDER_WIDTH = 3;
@@ -85,15 +81,6 @@ export default createStyleSheet({
         flex: 1
     },
 
-    backgroundOverlayGradient: {
-        bottom: 0,
-        left: 0,
-        opacity: 0.9,
-        position: 'absolute',
-        right: 0,
-        top: 0
-    },
-
     buttonsContainer: {
         alignItems: 'flex-end',
         flex: 1,