Skip to content

Commit

Permalink
Update iOS RNTester header to utilize SafeAreaView
Browse files Browse the repository at this point in the history
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 ad4b124
Showing 1 changed file with 16 additions and 12 deletions.
28 changes: 16 additions & 12 deletions RNTester/js/RNTesterApp.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const {
StyleSheet,
Text,
View,
SafeAreaView
} = ReactNative;

import type { RNTesterExample } from './RNTesterList.ios';
Expand All @@ -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> {
Expand Down Expand Up @@ -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,
},
Expand Down

0 comments on commit ad4b124

Please sign in to comment.