diff --git a/react/features/base/media/components/native/Video.js b/react/features/base/media/components/native/Video.js
index 471de3223..6cb32e4ab 100644
--- a/react/features/base/media/components/native/Video.js
+++ b/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
diff --git a/react/features/base/media/components/native/VideoTrack.js b/react/features/base/media/components/native/VideoTrack.js
index a5ad3dd3f..f9248ac9d 100644
--- a/react/features/base/media/components/native/VideoTrack.js
+++ b/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.
diff --git a/react/features/base/media/components/native/styles.js b/react/features/base/media/components/native/styles.js
index b1f13f833..274c03edc 100644
--- a/react/features/base/media/components/native/styles.js
+++ b/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
});
diff --git a/react/features/base/participants/components/ParticipantView.native.js b/react/features/base/participants/components/ParticipantView.native.js
index 272f3b4d6..cefea018a 100644
--- a/react/features/base/participants/components/ParticipantView.native.js
+++ b/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
diff --git a/react/features/base/participants/components/styles.js b/react/features/base/participants/components/styles.js
index 23df688f3..f33fea28c 100644
--- a/react/features/base/participants/components/styles.js
+++ b/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',
diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js
index 9941de18a..0ac9c4e3e 100644
--- a/react/features/conference/components/Conference.native.js
+++ b/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 {
*/}
+ {/*
+ * The overlays need to be bellow the Toolbox so that the user
+ * may tap the ToolbarButtons.
+ */}
+
+
{/*
* The Toolbox is in a stacking layer above the Filmstrip.
*/}
{/*
- * 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.
*/}
-
);
}
diff --git a/react/features/conference/components/styles.js b/react/features/conference/components/styles.js
index 3973a78a7..8962e2c2c 100644
--- a/react/features/conference/components/styles.js
+++ b/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',
diff --git a/react/features/filmstrip/components/native/AudioMutedIndicator.js b/react/features/filmstrip/components/native/AudioMutedIndicator.js
index b6597f70d..b6b6591a5 100644
--- a/react/features/filmstrip/components/native/AudioMutedIndicator.js
+++ b/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.
diff --git a/react/features/filmstrip/components/native/DominantSpeakerIndicator.js b/react/features/filmstrip/components/native/DominantSpeakerIndicator.js
index a8abd6c03..442fc107e 100644
--- a/react/features/filmstrip/components/native/DominantSpeakerIndicator.js
+++ b/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
diff --git a/react/features/filmstrip/components/native/ModeratorIndicator.js b/react/features/filmstrip/components/native/ModeratorIndicator.js
index ea0bfc9f0..d48be6843 100644
--- a/react/features/filmstrip/components/native/ModeratorIndicator.js
+++ b/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.
diff --git a/react/features/filmstrip/components/native/VideoMutedIndicator.js b/react/features/filmstrip/components/native/VideoMutedIndicator.js
index d5b8a1af2..a43ac6ec0 100644
--- a/react/features/filmstrip/components/native/VideoMutedIndicator.js
+++ b/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.
diff --git a/react/features/filmstrip/components/native/index.js b/react/features/filmstrip/components/native/index.js
index 1ef90a3b8..36d8e9696 100644
--- a/react/features/filmstrip/components/native/index.js
+++ b/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';
diff --git a/react/features/filmstrip/components/native/styles.js b/react/features/filmstrip/components/native/styles.js
index 33e9e9a92..ded2d7e18 100644
--- a/react/features/filmstrip/components/native/styles.js
+++ b/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.
diff --git a/react/features/filmstrip/components/styles.js b/react/features/filmstrip/components/styles.js
index 1ad2f8931..00850469a 100644
--- a/react/features/filmstrip/components/styles.js
+++ b/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.
*/
diff --git a/react/features/large-video/components/LargeVideo.native.js b/react/features/large-video/components/LargeVideo.native.js
index cac3a506c..981255595 100644
--- a/react/features/large-video/components/LargeVideo.native.js
+++ b/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.
diff --git a/react/features/large-video/components/styles.js b/react/features/large-video/components/styles.js
index 498e37d3c..a3ac55547 100644
--- a/react/features/large-video/components/styles.js
+++ b/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.
diff --git a/react/features/toolbox/components/Toolbox.native.js b/react/features/toolbox/components/Toolbox.native.js
index a2aa182bd..3df47ace6 100644
--- a/react/features/toolbox/components/Toolbox.native.js
+++ b/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';
/**
diff --git a/react/features/toolbox/components/styles.js b/react/features/toolbox/components/styles.js
index ebe0490f5..e2419bb41 100644
--- a/react/features/toolbox/components/styles.js
+++ b/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.
diff --git a/react/features/welcome/components/WelcomePage.native.js b/react/features/welcome/components/WelcomePage.native.js
index 2da8c9db8..3be938bc5 100644
--- a/react/features/welcome/components/WelcomePage.native.js
+++ b/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.
diff --git a/react/features/welcome/components/styles.js b/react/features/welcome/components/styles.js
index 5e71578a6..56b510674 100644
--- a/react/features/welcome/components/styles.js
+++ b/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.
*/