Merge pull request #3028 from saghul/rn-improve-styles

[RN] Simplify absolute fill styles

react/features/base/dialog/components/styles.js

@@ -1,3 +1,5 @@
+import { StyleSheet } from 'react-native';
+
 import { ColorPalette, createStyleSheet } from '../../styles';
 
 /**
@@ -32,11 +34,7 @@ export const bottomSheetStyles = createStyleSheet({
      * view instead, so the modal animation doesn't affect the backdrop.
      */
     backdrop: {
-        bottom: 0,
+        ...StyleSheet.absoluteFillObject
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
     },
 
     /**
@@ -53,12 +51,8 @@ export const bottomSheetStyles = createStyleSheet({
      * Style for an overlay on top of which the sheet will be displayed.
      */
     overlay: {
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        ...StyleSheet.absoluteFillObject,
-        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.8)'
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
     },
 
     /**

react/features/base/jwt/components/styles.native.js

@@ -1,3 +1,5 @@
+import { StyleSheet } from 'react-native';
+
 import { ColorPalette, createStyleSheet } from '../../styles';
 
 export default createStyleSheet({
@@ -8,17 +10,13 @@ export default createStyleSheet({
      * The style of {@code CalleeInfo}.
      */
     ringing: {
+        ...StyleSheet.absoluteFillObject,
         alignItems: 'center',
         backgroundColor: ColorPalette.black,
-        bottom: 0,
         flex: 0,
         flexDirection: 'column',
         justifyContent: 'center',
-        left: 0,
+        opacity: 0.8
-        opacity: 0.8,
-        position: 'absolute',
-        right: 0,
-        top: 0
     },
 
     'ringing__avatar': {

react/features/base/media/components/native/styles.js

@@ -35,11 +35,7 @@ export default StyleSheet.create({
      * and create a fade-in effect.
      */
     videoCover: {
-        backgroundColor: ColorPalette.black,
+        ...StyleSheet.absoluteFillObject,
-        bottom: 0,
+        backgroundColor: ColorPalette.black
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
     }
 });

react/features/base/react/components/native/TintedView.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { ColorPalette } from '../../../styles';
 
@@ -9,13 +9,9 @@ import { ColorPalette } from '../../../styles';
  * Base style for the {@code TintedView} component.
  */
 const BASE_STYLE = {
+    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
-    bottom: 0,
+    justifyContent: 'center'
-    justifyContent: 'center',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0
 };
 
 /**

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

@@ -1,3 +1,5 @@
+import { StyleSheet } from 'react-native';
+
 import {
     BoxModel,
     ColorPalette,
@@ -47,15 +49,11 @@ const HEADER_STYLES = {
      * The top-level element of a page.
      */
     page: {
+        ...StyleSheet.absoluteFillObject,
         alignItems: 'stretch',
-        bottom: 0,
         flex: 1,
         flexDirection: 'column',
-        left: 0,
+        overflow: 'hidden'
-        overflow: 'hidden',
-        position: 'absolute',
-        right: 0,
-        top: 0
     },
 
     /**

react/features/large-video/components/styles.js

@@ -1,3 +1,5 @@
+import { StyleSheet } from 'react-native';
+
 import { ColorPalette, createStyleSheet } from '../../base/styles';
 
 /**
@@ -10,14 +12,10 @@ export default createStyleSheet({
      * Large video container style.
      */
     largeVideo: {
+        ...StyleSheet.absoluteFillObject,
         alignItems: 'stretch',
         backgroundColor: ColorPalette.appBackground,
-        bottom: 0,
         flex: 1,
-        justifyContent: 'center',
+        justifyContent: 'center'
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
     }
 });

react/features/overlay/components/OverlayFrame.native.js

@@ -1,7 +1,7 @@
 // @flow
 
-import React, { Component } from 'react';
+import React, { Component, type Node } from 'react';
-import { View } from 'react-native';
+import { SafeAreaView } from 'react-native';
 
 import { overlayFrame as styles } from './styles';
 
@@ -13,7 +13,7 @@ type Props = {
     /**
      * The children components to be displayed into the overlay frame.
      */
-    children?: React$Node,
+    children: Node,
 };
 
 /**
@@ -24,13 +24,13 @@ export default class OverlayFrame extends Component<Props> {
      * Implements React's {@link Component#render()}.
      *
      * @inheritdoc
-     * @returns {React$Element}
+     * @returns {ReactElement}
      */
     render() {
         return (
-            <View style = { styles.container }>
+            <SafeAreaView style = { styles.container }>
                 { this.props.children }
-            </View>
+            </SafeAreaView>
         );
     }
 }

react/features/overlay/components/styles.js

@@ -1,3 +1,5 @@
+import { StyleSheet } from 'react-native';
+
 import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
 
 /**
@@ -14,12 +16,8 @@ export const overlayFrame = createStyleSheet({
      * rendered.
      */
     container: {
-        backgroundColor: ColorPalette.red,
+        ...StyleSheet.absoluteFillObject,
-        bottom: 0,
+        backgroundColor: ColorPalette.red
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
     }
 });
 
@@ -52,22 +50,16 @@ export const pageReloadOverlay = createStyleSheet({
      */
     container: {
         flex: 1,
-        marginBottom: BoxModel.margin,
+        margin: BoxModel.margin * 2
-        marginHorizontal: BoxModel.margin,
-        marginTop: BoxModel.margin * 3
     },
 
     /**
      * Style for the {@code LoadingIndicator}.
      */
     loadingIndicator: {
+        ...StyleSheet.absoluteFillObject,
         alignItems: 'center',
-        bottom: 0,
+        justifyContent: 'center'
-        justifyContent: 'center',
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
     },
 
     /**

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

@@ -1,4 +1,5 @@
 // @flow
+import { StyleSheet } from 'react-native';
 
 import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
 
@@ -98,11 +99,7 @@ const styles = createStyleSheet({
      * of the screen.
      */
     toolboxWide: {
-        bottom: 0,
+        ...StyleSheet.absoluteFillObject
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
     },
 
     /**