From 20c1b1cfae22d0ca2bd16c996c7e57509f2dabb7 Mon Sep 17 00:00:00 2001
From: Bettenbuk Zoltan <zoltan.bettenbuk@gmail.com>
Date: Mon, 4 Mar 2019 15:49:57 +0100
Subject: [PATCH] [RN] Wrap PagedList navigator with SafeAreaView

---
 .../base/react/components/native/PagedList.js       |  8 ++++----
 .../features/base/react/components/native/styles.js | 13 +++++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/react/features/base/react/components/native/PagedList.js b/react/features/base/react/components/native/PagedList.js
index d02b70460..53f12e1f7 100644
--- a/react/features/base/react/components/native/PagedList.js
+++ b/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 = { [
diff --git a/react/features/base/react/components/native/styles.js b/react/features/base/react/components/native/styles.js
index fac0ae3f8..a09846469 100644
--- a/react/features/base/react/components/native/styles.js
+++ b/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'
     },