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

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,
   },