[RN] Simplify styles which fill the parent view

Turns out React Native offers an object with the following definition: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 }
deboajagbe · May 23, 2018 · bbb1dce · bbb1dce
1 parent 31864b9
commit bbb1dce
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 62 deletions.
diff --git a/react/features/base/dialog/components/styles.js b/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,
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
+        ...StyleSheet.absoluteFillObject
     },
 
     /**
@@ -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)',
-        bottom: 0,
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.8)'
     },
 
     /**

diff --git a/react/features/base/jwt/components/styles.native.js b/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,
-        position: 'absolute',
-        right: 0,
-        top: 0
+        opacity: 0.8
     },
 
     'ringing__avatar': {

diff --git a/react/features/base/media/components/native/styles.js b/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,
-        bottom: 0,
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: ColorPalette.black
     }
 });
diff --git a/react/features/base/react/components/native/TintedView.js b/react/features/base/react/components/native/TintedView.js
@@ -1,21 +1,17 @@
 // @flow
 
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { ColorPalette } from '../../../styles';
 
 /**
  * Base style for the {@code TintedView} component.
  */
 const BASE_STYLE = {
+    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
-    bottom: 0,
-    justifyContent: 'center',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0
+    justifyContent: 'center'
 };
 
 /**

diff --git a/react/features/base/react/components/native/styles.js b/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',
-        position: 'absolute',
-        right: 0,
-        top: 0
+        overflow: 'hidden'
     },
 
     /**

diff --git a/react/features/large-video/components/styles.js b/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',
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
+        justifyContent: 'center'
     }
 });
diff --git a/react/features/overlay/components/styles.js b/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,
-        bottom: 0,
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: ColorPalette.red
     }
 });
 
@@ -52,22 +50,16 @@ export const pageReloadOverlay = createStyleSheet({
      */
     container: {
         flex: 1,
-        marginBottom: BoxModel.margin,
-        marginHorizontal: BoxModel.margin,
-        marginTop: BoxModel.margin * 3
+        margin: BoxModel.margin * 2
     },
 
     /**
      * Style for the {@code LoadingIndicator}.
      */
     loadingIndicator: {
+        ...StyleSheet.absoluteFillObject,
         alignItems: 'center',
-        bottom: 0,
-        justifyContent: 'center',
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
+        justifyContent: 'center'
     },
 
     /**

diff --git a/react/features/toolbox/components/native/styles.js b/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,
-        left: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
+        ...StyleSheet.absoluteFillObject
     },
 
     /**