[RN] Coding style

The files styles.js are used (pretty much) on React Native only and each
of them exports 1 name. Export it as default to cut down on source code.

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

@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import { RTCView } from 'react-native-webrtc';
 
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * The React Native {@link Component} which is similar to Web's

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

@@ -3,7 +3,7 @@ import { Animated } from 'react-native';
 import { connect } from 'react-redux';
 
 import AbstractVideoTrack from '../AbstractVideoTrack';
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * Component that renders video element for a specified video track.

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

@@ -1,15 +1,15 @@
 import { StyleSheet } from 'react-native';
 
 /**
- * Make video element fill its container.
+ * Make {@code Video} fill its container.
  */
 const video = {
     flex: 1
 };
 
 /**
- * Native-specific styles for media components.
+ * The styles of the feature base/media.
  */
-export const styles = StyleSheet.create({
+export default StyleSheet.create({
     video
 });

react/features/base/participants/components/ParticipantView.native.js

@@ -12,7 +12,7 @@ import { getTrackByMediaTypeAndParticipant } from '../../tracks';
 
 import Avatar from './Avatar';
 import { getAvatarURL, getParticipantById } from '../functions';
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * Implements a React Component which depicts a specific participant's avatar

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

@@ -1,11 +1,11 @@
 import { createStyleSheet } from '../../styles';
 
 /**
- * The style of the avatar and participant view UI (components).
+ * The styles of the feature base/participants.
  */
-export const styles = createStyleSheet({
+export default createStyleSheet({
     /**
-     * ParticipantView style.
+     * {@code ParticipantView} style.
      */
     participantView: {
         alignItems: 'stretch',

react/features/conference/components/Conference.native.js

@@ -9,7 +9,7 @@ import { LargeVideo } from '../../large-video';
 import { OverlayContainer } from '../../overlay';
 import { setToolboxVisible, Toolbox } from '../../toolbox';
 
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * The timeout in milliseconds after which the Toolbox will be hidden.
@@ -145,19 +145,21 @@ class Conference extends Component {
                   */}
                 <Filmstrip />
 
+                {/*
+                  * The overlays need to be bellow the Toolbox so that the user
+                  * may tap the ToolbarButtons.
+                  */}
+                <OverlayContainer />
+
                 {/*
                   * The Toolbox is in a stacking layer above the Filmstrip.
                   */}
                 <Toolbox />
 
                 {/*
-                  * The dialogs and overlays are in the topmost stacking layers.
-                  * Generally, the dialogs and overlays should not be visible at
-                  * the same time so it is not really defined which one is above
-                  * the other.
+                  * The dialogs are in the topmost stacking layers.
                   */}
                 <DialogContainer />
-                <OverlayContainer />
             </Container>
         );
     }

react/features/conference/components/styles.js

@@ -5,11 +5,11 @@ import {
 } from '../../base/styles';
 
 /**
- * The style of the conference UI (component).
+ * The styles of the feature conference.
  */
-export const styles = createStyleSheet({
+export default createStyleSheet({
     /**
-     * Conference style.
+     * {@code Conference} style.
      */
     conference: fixAndroidViewClipping({
         alignSelf: 'stretch',

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * Thumbnail badge for displaying the audio mute status of a participant.

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * Thumbnail badge showing that the participant is the dominant speaker in

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * Thumbnail badge showing that the participant is a conference moderator.

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * Thumbnail badge for displaying the video mute status of a participant.

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

@@ -1,5 +1,5 @@
 export * from './AudioMutedIndicator';
 export * from './DominantSpeakerIndicator';
 export * from './ModeratorIndicator';
-export * from './styles';
+export { default as styles } from './styles';
 export * from './VideoMutedIndicator';

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

@@ -1,6 +1,6 @@
 import { ColorPalette, createStyleSheet } from '../../../base/styles';
 
-import { styles as platformIndependentStyles } from '../styles';
+import { default as platformIndependentStyles } from '../styles';
 
 /**
  * The base/default style of indicators such as audioMutedIndicator,
@@ -15,9 +15,9 @@ const indicator = {
 };
 
 /**
- * Native-specific styles for the filmstrip.
+ * The styles of the feature filmstrip.
  */
-export const styles = createStyleSheet(platformIndependentStyles, {
+export default createStyleSheet(platformIndependentStyles, {
 
     /**
      * Audio muted indicator style.

react/features/filmstrip/components/styles.js

@@ -2,9 +2,9 @@ import { Platform } from '../../base/react';
 import { BoxModel, ColorPalette } from '../../base/styles';
 
 /**
- * Filmstrip related styles common to both Web and native.
+ * The styles of the feature filmstrip common to both Web and native.
  */
-export const styles = {
+export default {
     /**
      * Avatar style.
      */

react/features/large-video/components/LargeVideo.native.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 
 import { ParticipantView } from '../../base/participants';
 
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * Implements a React {@link Component} which represents the large video (a.k.a.

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

@@ -1,6 +1,6 @@
 import { ColorPalette, createStyleSheet } from '../../base/styles';
 
-export const styles = createStyleSheet({
+export default createStyleSheet({
     /**
      * The style of the avatar of the participant displayed in largeVideo. It's
      * an addition to the default style of Avatar.

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

@@ -13,7 +13,7 @@ import {
     abstractMapDispatchToProps,
     abstractMapStateToProps
 } from '../functions';
-import { styles } from './styles';
+import styles from './styles';
 import ToolbarButton from './ToolbarButton';
 
 /**

react/features/toolbox/components/styles.js

@@ -70,7 +70,7 @@ const secondaryToolbarButtonIcon = {
 /**
  * The (conference) Toolbox/Toolbar related styles.
  */
-export const styles = createStyleSheet({
+export default createStyleSheet({
     /**
      * The style of the toolbar button in {@link #primaryToolbar} which
      * hangs the current conference up.

react/features/welcome/components/WelcomePage.native.js

@@ -7,7 +7,7 @@ import { Link, Text } from '../../base/react';
 import { ColorPalette } from '../../base/styles';
 
 import { AbstractWelcomePage, _mapStateToProps } from './AbstractWelcomePage';
-import { styles } from './styles';
+import styles from './styles';
 
 /**
  * The URL at which the privacy policy is available to the user.

react/features/welcome/components/styles.js

@@ -13,7 +13,7 @@ const TEXT_COLOR = ColorPalette.white;
 /**
  * The styles of WelcomePage.
  */
-export const styles = createStyleSheet({
+export default createStyleSheet({
     /**
      * Join button style.
      */