diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js
index b3cd5984f..d7960b598 100644
--- a/react/features/conference/components/native/Conference.js
+++ b/react/features/conference/components/native/Conference.js
@@ -295,7 +295,9 @@ class Conference extends AbstractConference<Props, *> {
 
                     <Captions onPress = { this._onClick } />
 
-                    { _shouldDisplayTileView || <DisplayNameLabel participantId = { _largeVideoParticipantId } /> }
+                    { _shouldDisplayTileView || <Container style = { styles.displayNameContainer }>
+                        <DisplayNameLabel participantId = { _largeVideoParticipantId } />
+                    </Container> }
 
                     <LonelyMeetingExperience />
 
diff --git a/react/features/conference/components/native/styles.js b/react/features/conference/components/native/styles.js
index d5ffaa06d..83b618b50 100644
--- a/react/features/conference/components/native/styles.js
+++ b/react/features/conference/components/native/styles.js
@@ -33,6 +33,10 @@ export default {
         flex: 1
     }),
 
+    displayNameContainer: {
+        margin: 10
+    },
+
     gradient: {
         position: 'absolute',
         top: 0,
diff --git a/react/features/display-name/components/native/DisplayNameLabel.js b/react/features/display-name/components/native/DisplayNameLabel.js
index 04e274763..eba28f712 100644
--- a/react/features/display-name/components/native/DisplayNameLabel.js
+++ b/react/features/display-name/components/native/DisplayNameLabel.js
@@ -73,7 +73,7 @@ function _mapStateToProps(state: Object, ownProps: Props) {
     // participant and there is no video rendered for
     // them.
     const _render = Boolean(participantId)
-        && localParticipant.id !== participantId
+        && localParticipant?.id !== participantId
         && !shouldRenderParticipantVideo(state, participantId)
         && !isFakeParticipant;
 
diff --git a/react/features/display-name/components/native/styles.js b/react/features/display-name/components/native/styles.js
index 79efe2a06..db4a3283d 100644
--- a/react/features/display-name/components/native/styles.js
+++ b/react/features/display-name/components/native/styles.js
@@ -7,7 +7,6 @@ export default {
         alignSelf: 'center',
         backgroundColor: 'rgba(28, 32, 37, 0.6)',
         borderRadius: 4,
-        margin: 16,
         paddingHorizontal: 16,
         paddingVertical: 4
     },
diff --git a/react/features/filmstrip/components/native/Thumbnail.js b/react/features/filmstrip/components/native/Thumbnail.js
index 288985ae5..26f9429a4 100644
--- a/react/features/filmstrip/components/native/Thumbnail.js
+++ b/react/features/filmstrip/components/native/Thumbnail.js
@@ -157,7 +157,9 @@ function Thumbnail(props: Props) {
                 tintStyle = { _styles.activeThumbnailTint }
                 zOrder = { 1 } />
 
-            { renderDisplayName && <DisplayNameLabel participantId = { participantId } /> }
+            { renderDisplayName && <Container style = { styles.displayNameContainer }>
+                <DisplayNameLabel participantId = { participantId } />
+            </Container> }
 
             { renderModeratorIndicator
                 && <View style = { styles.moderatorIndicatorContainer }>
diff --git a/react/features/filmstrip/components/native/styles.js b/react/features/filmstrip/components/native/styles.js
index 42d7f05b8..3eda154a8 100644
--- a/react/features/filmstrip/components/native/styles.js
+++ b/react/features/filmstrip/components/native/styles.js
@@ -14,6 +14,17 @@ export const AVATAR_SIZE = 50;
  */
 export default {
 
+    /**
+     * The display name container.
+     */
+    displayNameContainer: {
+        alignSelf: 'center',
+        bottom: 0,
+        flex: 1,
+        margin: 4,
+        position: 'absolute'
+    },
+
     /**
      * The style of the narrow {@link Filmstrip} version which displays
      * thumbnails in a row at the bottom of the screen.