[RN] Fix call/ring overlay

react/features/jwt/components/CallOverlay.js

@@ -8,6 +8,8 @@ import { Avatar } from '../../base/participants';
 import { Container, Text } from '../../base/react';
 import UIEvents from '../../../../service/UI/UIEvents';
 
+import styles from './styles';
+
 declare var $: Object;
 declare var APP: Object;
 declare var interfaceConfig: Object;
@@ -160,17 +162,22 @@ class CallOverlay extends Component {
 
         return (
             <Container
-                className = { `ringing ${className || ''}` }
+                { ...this._style('ringing', className) }
                 id = 'ringOverlay'>
-                <Container className = 'ringing__content'>
-                    { ringing ? <Text>Calling...</Text> : null }
+                <Container
+                    { ...this._style('ringing__content') }>
+                    <Text { ...this._style('ringing__text') }>
+                        { ringing ? 'Calling...' : '' }
+                    </Text>
                     <Avatar
-                        className = 'ringing__avatar'
+                        { ...this._style('ringing__avatar') }
                         uri = { avatarUrl } />
-                    <Container className = 'ringing__caller-info'>
-                        <Text>
+                    <Container
+                        { ...this._style('ringing__caller-info') }>
+                        <Text
+                            { ...this._style('ringing__text') }>
                             { name }
-                            { ringing ? null : ' isn\'t available' }
+                            { ringing ? '' : ' isn\'t available' }
                         </Text>
                     </Container>
                 </Container>
@@ -263,6 +270,52 @@ class CallOverlay extends Component {
     _setAudio(audio) {
         this._audio = audio;
     }
+
+    /**
+     * Attempts to convert specified CSS class names into React
+     * {@link Component} props {@code style} or {@code className}.
+     *
+     * @param {Array<string>} classNames - The CSS class names to convert
+     * into React {@code Component} props {@code style} or {@code className}.
+     * @returns {{
+     *     className: string,
+     *     style: Object
+     * }}
+     */
+    _style(...classNames: Array<?string>) {
+        let className = '';
+        let style;
+
+        for (const aClassName of classNames) {
+            if (aClassName) {
+                // Attemp to convert aClassName into style.
+                if (styles && aClassName in styles) {
+                    // React Native will accept an Array as the value of the
+                    // style prop. However, I do not know about React.
+                    style = {
+                        ...style,
+                        ...styles[aClassName]
+                    };
+                } else {
+                    // Otherwise, leave it as className.
+                    className += aClassName;
+                }
+            }
+        }
+
+        // Choose which of the className and/or style props has a value and,
+        // consequently, must be returned.
+        const props = {};
+
+        if (className) {
+            props.className = className;
+        }
+        if (style) {
+            props.style = style;
+        }
+
+        return props;
+    }
 }
 
 /**

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

@@ -0,0 +1,51 @@
+import { ColorPalette, createStyleSheet } from '../../base/styles';
+
+export default createStyleSheet({
+    // XXX The names bellow were preserved for the purposes of compatibility
+    // with the existing CSS class names on Web.
+
+    /**
+     * The style of {@code CallOverlay}.
+     */
+    ringing: {
+        alignItems: 'center',
+        backgroundColor: ColorPalette.black,
+        bottom: 0,
+        flex: 0,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        left: 0,
+        opacity: 0.8,
+        position: 'absolute',
+        right: 0,
+        top: 0
+    },
+
+    'ringing__avatar': {
+        borderRadius: 50,
+        flex: 0,
+        height: 100,
+        width: 100
+    },
+
+    'ringing__caller-info': {
+        alignItems: 'center',
+        flex: 0,
+        flexDirection: 'row',
+        justifyContent: 'center'
+    },
+
+    'ringing__content': {
+        alignItems: 'center',
+        flex: 0,
+        flexDirection: 'column',
+        justifyContent: 'center'
+    },
+
+    /**
+     * The style of {@code Text} within {@code CallOverlay}.
+     */
+    'ringing__text': {
+        color: ColorPalette.white
+    }
+});