rn,tile-view: render display name on top of participant view

Makes the tiles consistent as the participant view is equally sized and the
avatar is always centered in the tile.

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 />
 

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

@@ -33,6 +33,10 @@ export default {
         flex: 1
     }),
 
+    displayNameContainer: {
+        margin: 10
+    },
+
     gradient: {
         position: 'absolute',
         top: 0,

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;
 

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
     },

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 }>

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.