status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update iOS RNTester header to utilize SafeAreaView 

Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Viewing RNTester on my iPhone X hurts my eyes

Opened RNTester on iPhone 7/X simulators as well as my physical X and visually confirmed the header was correctly rendered:

<img width="914" alt="simulator-screenshot" src="https://user-images.githubusercontent.com/1398555/33237093-4bc932ac-d237-11e7-9238-aed8c059fd5f.png">

[IOS] [ENHANCEMENT] [RNTester] - Update iOS RNTester header to utilize SafeAreaView

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/16981

Differential Revision: D6436215

Pulled By: hramos

fbshipit-source-id: 14f5361a365429e61c37b0b5e52b4adfb026bd60
This commit is contained in:
Vincent Riemer 2017-11-29 08:51:08 -08:00 committed by Facebook Github Bot
parent aba148f733
commit ad4b124aa1
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
RNTester/js/RNTesterApp.ios.js
View File

@ -30,6 +30,7 @@ const {
StyleSheet,
Text,
View,
SafeAreaView
} = ReactNative;
import type { RNTesterExample } from './RNTesterList.ios';
@ -43,14 +44,16 @@ type Props = {
const APP_STATE_KEY = 'RNTesterAppState.v2';
const Header = ({ onBack, title }: { onBack?: () => mixed, title: string }) => (
<View style={styles.header}>
<View style={styles.headerCenter}>
<Text style={styles.title}>{title}</Text>
<SafeAreaView style={styles.headerContainer}>
<View style={styles.header}>
<View style={styles.headerCenter}>
<Text style={styles.title}>{title}</Text>
</View>
{onBack && <View style={styles.headerLeft}>
<Button title="Back" onPress={onBack} />
</View>}
</View>
{onBack && <View style={styles.headerLeft}>
<Button title="Back" onPress={onBack} />
</View>}
</View>
</SafeAreaView>
);
class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
@ -138,20 +141,21 @@ class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
}
const styles = StyleSheet.create({
header: {
height: 60,
headerContainer: {
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#96969A',
backgroundColor: '#F5F5F6',
flexDirection: 'row',
paddingTop: 20,
},
header: {
height: 40,
flexDirection: 'row'
},
headerLeft: {
},
headerCenter: {
flex: 1,
position: 'absolute',
top: 27,
top: 7,
left: 0,
right: 0,
},