Remove duplication

react/features/base/styles/functions.js

@@ -1,5 +1,9 @@
 /* @flow */
 
+import { Platform } from '../react';
+
+import { ColorPalette } from './components';
+
 declare type StyleSheet = Object;
 
 /**
@@ -39,6 +43,25 @@ export function createStyleSheet(styles: StyleSheet, overrides: StyleSheet = {})
     return combinedStyles;
 }
 
+/**
+ * Works around a bug in react-native or react-native-webrtc on Android which
+ * causes Views overlaying RTCView to be clipped. Even though we (may) display
+ * multiple RTCViews, it is enough to apply the fix only to a View with a
+ * bounding rectangle containing all RTCviews and their overlaying Views.
+ *
+ * @param {StyleSheet} styles - An object which represents a stylesheet.
+ * @public
+ * @returns {StyleSheet}
+ */
+export function fixAndroidViewClipping<T: StyleSheet>(styles: T): T {
+    if (Platform.OS === 'android') {
+        styles.borderColor = ColorPalette.appBackground;
+        styles.borderWidth = 0.2;
+    }
+
+    return styles;
+}
+
 /**
  * Shims style properties to work correctly on native. Allows us to minimize the
  * number of style declarations that need to be set or overridden for specific

react/features/conference/components/styles.js

@@ -1,4 +1,8 @@
-import { ColorPalette, createStyleSheet } from '../../base/styles';
+import {
+    ColorPalette,
+    createStyleSheet,
+    fixAndroidViewClipping
+} from '../../base/styles';
 
 /**
  * The style of the conference UI (component).
@@ -15,17 +19,11 @@ export const styles = createStyleSheet({
     /**
      * Conference style.
      */
-    conference: {
+    conference: fixAndroidViewClipping({
         alignSelf: 'stretch',
         backgroundColor: ColorPalette.appBackground,
-
-        // XXX These properties are a workaround for Android views clipping,
-        // RN doesn't properly blit our overlays on top of video views.
-        borderColor: ColorPalette.appBackground,
-        borderWidth: 0.2,
-
         flex: 1
-    },
+    }),
 
     /**
      * ParticipantView style

react/features/welcome/components/styles.js

@@ -1,4 +1,9 @@
-import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
+import {
+    BoxModel,
+    ColorPalette,
+    createStyleSheet,
+    fixAndroidViewClipping
+} from '../../base/styles';
 
 /**
  * The default color of text on the WelcomePage.
@@ -35,17 +40,11 @@ export const styles = createStyleSheet({
     /**
      * The style of the top-level container of WelcomePage.
      */
-    container: {
+    container: fixAndroidViewClipping({
         alignSelf: 'stretch',
         backgroundColor: ColorPalette.blue,
-
-        // XXX These properties are a workaround for Android views clipping,
-        // RN doesn't properly blit our overlays on top of video views.
-        borderColor: ColorPalette.appBackground,
-        borderWidth: 0.2,
-
         flex: 1
-    },
+    }),
 
     /**
      * The style of the legal-related content such as (hyper)links to Privacy