[RN] Wrap PagedList navigator with SafeAreaView

react/features/base/react/components/native/PagedList.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { Component } from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView, Text, TouchableOpacity, View } from 'react-native';
 import { connect } from 'react-redux';
 
 import { Icon } from '../../../font-icons';
@@ -215,13 +215,13 @@ class PagedList extends Component<Props, State> {
                 {
                     this._renderPage(pages[pageIndex], disabled)
                 }
-                <View style = { styles.pageIndicatorContainer }>
+                <SafeAreaView style = { styles.pageIndicatorContainer }>
                     {
                         pages.map((page, index) => this._renderPageIndicator(
                             page, index, disabled
                         ))
                     }
-                </View>
+                </SafeAreaView>
             </View>
         );
     }
@@ -247,7 +247,7 @@ class PagedList extends Component<Props, State> {
                 key = { index }
                 onPress = { this._onSelectPage(index) }
                 style = { styles.pageIndicator } >
-                <View style = { styles.pageIndicator }>
+                <View style = { styles.pageIndicatorContent }>
                     <Icon
                         name = { page.icon }
                         style = { [

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

@@ -104,9 +104,9 @@ const PAGED_LIST_STYLES = {
      */
     pageIndicator: {
         alignItems: 'center',
-        flex: 1,
         flexDirection: 'column',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        padding: BoxModel.padding / 2
     },
 
     /**
@@ -120,10 +120,15 @@ const PAGED_LIST_STYLES = {
      * Container for the page indicators (Android).
      */
     pageIndicatorContainer: {
-        alignItems: 'stretch',
+        alignItems: 'center',
         backgroundColor: ColorPalette.blue,
         flexDirection: 'row',
-        height: 56,
+        justifyContent: 'space-around'
+    },
+
+    pageIndicatorContent: {
+        alignItems: 'center',
+        flexDirection: 'column',
         justifyContent: 'center'
     },