Permalink
Browse files

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 #16981

Differential Revision: D6436215

Pulled By: hramos

fbshipit-source-id: 14f5361a365429e61c37b0b5e52b4adfb026bd60
  • Loading branch information...
vincentriemer authored and facebook-github-bot committed Nov 29, 2017
1 parent aba148f commit ad4b124aa117483b4a0ec9dfa145b8e9a17f06c6
Showing with 16 additions and 12 deletions.
  1. +16 −12 RNTester/js/RNTesterApp.ios.js
@@ -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,
},

0 comments on commit ad4b124

Please sign in to comment.