haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[RN] Wrap PagedList navigator with SafeAreaView

This commit is contained in:
Bettenbuk Zoltan 2019-03-04 15:49:57 +01:00 committed by Zoltan Bettenbuk
parent ecb44b6ab4
commit 20c1b1cfae
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
react/features/base/react/components/native/PagedList.js
View File

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

13
react/features/base/react/components/native/styles.js
View File

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