status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-13 01:46:59 +00:00
Code Issues Projects Releases Wiki Activity

YellowBox: Apply SafeAreaView in Header

Browse Source 
Summary: Uses `SafeAreaView` in the YellowBox inspector header so that it does not collide with the status bar.

Reviewed By: sahrens

Differential Revision: D8374861

fbshipit-source-id: e67358ac9268db8291cacf79df402f3bd5a2173d
This commit is contained in:
Tim Yung 2018-06-12 17:35:32 -07:00 committed by Facebook Github Bot
parent a7a5b666eb
commit 4f0b9e2554
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
Libraries/YellowBox/UI/YellowBoxInspectorHeader.js
View File

@ -12,6 +12,7 @@
const Platform = require('Platform');
const React = require('React');
const SafeAreaView = require('SafeAreaView');
const StyleSheet = require('StyleSheet');
const Text = require('Text');
const UTFSequence = require('UTFSequence');
@ -37,21 +38,23 @@ const YellowBoxInspectorHeader = (props: Props): React.Node => {
: `Occurrence ${props.selectedIndex + 1} of ${props.warnings.length}`;
return (
<View style={styles.header}>
<YellowBoxInspectorHeaderButton
disabled={props.warnings[prevIndex] == null}
label={UTFSequence.TRIANGLE_LEFT}
onPress={() => props.onSelectIndex(prevIndex)}
/>
<View style={styles.headerTitle}>
<Text style={styles.headerTitleText}>{titleText}</Text>
<SafeAreaView style={styles.root}>
<View style={styles.header}>
<YellowBoxInspectorHeaderButton
disabled={props.warnings[prevIndex] == null}
label={UTFSequence.TRIANGLE_LEFT}
onPress={() => props.onSelectIndex(prevIndex)}
/>
<View style={styles.headerTitle}>
<Text style={styles.headerTitleText}>{titleText}</Text>
</View>
<YellowBoxInspectorHeaderButton
disabled={props.warnings[nextIndex] == null}
label={UTFSequence.TRIANGLE_RIGHT}
onPress={() => props.onSelectIndex(nextIndex)}
/>
</View>
<YellowBoxInspectorHeaderButton
disabled={props.warnings[nextIndex] == null}
label={UTFSequence.TRIANGLE_RIGHT}
onPress={() => props.onSelectIndex(nextIndex)}
/>
</View>
</SafeAreaView>
);
};
@ -63,6 +66,10 @@ const YellowBoxInspectorHeaderButton = (
|}>,
): React.Node => (
<YellowBoxPressable
backgroundColor={{
default: 'transparent',
pressed: YellowBoxStyle.getHighlightColor(1),
}}
onPress={props.disabled ? null : props.onPress}
style={styles.headerButton}>
{props.disabled ? null : (
@ -72,6 +79,9 @@ const YellowBoxInspectorHeaderButton = (
);
const styles = StyleSheet.create({
root: {
backgroundColor: YellowBoxStyle.getBackgroundColor(0.95),
},
header: {
flexDirection: 'row',
height: Platform.select({
@ -92,7 +102,6 @@ const styles = StyleSheet.create({
},
headerTitle: {
alignItems: 'center',
backgroundColor: YellowBoxStyle.getBackgroundColor(0.95),
flex: 1,
justifyContent: 'center',
},