[RN] Implement web's CircularLabel component for mobile

react/features/base/label/components/AbstractCircularLabel.js

@@ -0,0 +1,17 @@
+// @flow
+import { Component } from 'react';
+
+export type Props = {
+
+    /**
+     * String that will be rendered as the label itself.
+     */
+    label: string
+};
+
+/**
+ * Abstract class for the {@code CircularLabel} component.
+ */
+export default class AbstractCircularLabel<P: Props> extends Component<P> {
+
+}

react/features/base/label/components/CircularLabel.native.js

@@ -0,0 +1,44 @@
+// @flow
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { combineStyles, type StyleType } from '../../styles';
+
+import AbstractCircularLabel, {
+    type Props as AbstractProps
+} from './AbstractCircularLabel';
+import styles from './styles';
+
+type Props = AbstractProps & {
+
+    /**
+     * Style of the label.
+     */
+    style?: ?StyleType
+};
+
+/**
+ * Renders a circular indicator to be used for status icons, such as recording
+ * on, audio-only conference, video quality and similar.
+ */
+export default class CircularLabel extends AbstractCircularLabel<Props> {
+    /**
+     * Implements React {@link Component}'s render.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { label, style } = this.props;
+
+        return (
+            <View
+                style = {
+                    combineStyles(styles.indicatorContainer, style)
+                }>
+                <Text style = { styles.indicatorText }>
+                    { label }
+                </Text>
+            </View>
+        );
+    }
+}

react/features/base/label/components/CircularLabel.web.js

@@ -1,13 +1,12 @@
 // @flow
 
-import React, { Component } from 'react';
+import React from 'react';
 
-type Props = {
+import AbstractCircularLabel, {
+    type Props as AbstractProps
+} from './AbstractCircularLabel';
 
-    /**
+type Props = AbstractProps & {
-     * The children to be displayed within {@code CircularLabel}.
-     */
-    children: React$Node,
 
     /**
      * Additional CSS class names to add to the root of {@code CircularLabel}.
@@ -26,7 +25,7 @@ type Props = {
  *
  * @extends Component
  */
-export default class CircularLabel extends Component<Props> {
+export default class CircularLabel extends AbstractCircularLabel<Props> {
     /**
      * Default values for {@code CircularLabel} component's properties.
      *
@@ -44,16 +43,16 @@ export default class CircularLabel extends Component<Props> {
      */
     render() {
         const {
-            children,
             className,
-            id
+            id,
+            label
         } = this.props;
 
         return (
             <div
                 className = { `circular-label ${className}` }
                 id = { id }>
-                { children }
+                { label }
             </div>
         );
     }

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

@@ -0,0 +1,30 @@
+// @flow
+
+import { ColorPalette, createStyleSheet } from '../../styles';
+
+/**
+ * The styles of the native base/label feature.
+ */
+export default createStyleSheet({
+
+    /**
+     * The outermost view.
+     */
+    indicatorContainer: {
+        alignItems: 'center',
+        backgroundColor: '#808080',
+        borderRadius: 18,
+        borderWidth: 0,
+        flex: 0,
+        height: 36,
+        justifyContent: 'center',
+        margin: 5,
+        opacity: 0.6,
+        width: 36
+    },
+
+    indicatorText: {
+        color: ColorPalette.white,
+        fontSize: 12
+    }
+});

react/features/recording/components/RecordingLabel.web.js

@@ -189,9 +189,9 @@ class RecordingLabel extends Component<Props, State> {
                     ? <div>
                         { this.props.t(messageKey) }
                     </div>
-                    : <CircularLabel className = { circularLabelClass }>
+                    : <CircularLabel
-                        { this.props.t(circularLabelKey) }
+                        className = { circularLabelClass }
-                    </CircularLabel> }
+                        label = { this.props.t(circularLabelKey) } /> }
             </div>
         );
     }

react/features/video-quality/components/VideoQualityLabel.web.js

@@ -109,9 +109,8 @@ export class VideoQualityLabel extends Component {
                 position = { 'left' }>
                 <CircularLabel
                     className = { className }
-                    id = 'videoResolutionLabel'>
+                    id = 'videoResolutionLabel'
-                    { labelContent }
+                    label = { labelContent } />
-                </CircularLabel>
             </Tooltip>
         );
     }