[RN] Make BaseIndicator render simpler

react/features/filmstrip/components/native/BaseIndicator.js

@@ -33,19 +33,12 @@ export default class BaseIndicator extends Component<Props> {
     render() {
         const { highlight, icon } = this.props;
 
-        const iconElement = (<Icon
-            name = { icon }
-            style = { styles.indicator } />
+        return (
+            <View style = { highlight ? styles.highlightedIndicator : null }>
+                <Icon
+                    name = { icon }
+                    style = { styles.indicator } />
+            </View>
         );
-
-        if (highlight) {
-            return (
-                <View style = { styles.indicatorBackground }>
-                    { iconElement }
-                </View>
-            );
-        }
-
-        return iconElement;
     }
 }

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

@@ -14,6 +14,15 @@ export const AVATAR_SIZE = 50;
  * The styles of the feature filmstrip.
  */
 export default {
+    /**
+     * Highlighted indicator additional style.
+     */
+    highlightedIndicator: {
+        backgroundColor: ColorPalette.blue,
+        borderRadius: 16,
+        padding: 4
+    },
+
     /**
      * Dominant speaker indicator style.
      */
@@ -28,19 +37,6 @@ export default {
         }
     },
 
-    /**
-     * Dominant speaker indicator background style.
-     */
-    indicatorBackground: {
-        alignItems: 'center',
-        backgroundColor: ColorPalette.blue,
-        borderRadius: 16,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        height: 20,
-        width: 20
-    },
-
     /**
      * The style of the narrow {@link Filmstrip} version which displays
      * thumbnails in a row at the bottom of the screen.