From 586c09ee9039bb38feac6bba5b61ba053b160e27 Mon Sep 17 00:00:00 2001
From: "Tanner W. Stokes" <tanner.stokes@automattic.com>
Date: Tue, 12 Oct 2021 17:37:23 -0400
Subject: [PATCH] Wrap NavigationContainer with SafeAreaView.

---
 .../components/editor-help/index.native.js    | 226 +++++++++---------
 1 file changed, 116 insertions(+), 110 deletions(-)

diff --git a/packages/editor/src/components/editor-help/index.native.js b/packages/editor/src/components/editor-help/index.native.js
index 94fab0f006623c..90032046cdfdc7 100644
--- a/packages/editor/src/components/editor-help/index.native.js
+++ b/packages/editor/src/components/editor-help/index.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { kebabCase } from 'lodash';
-import { Text, ScrollView, StyleSheet, View } from 'react-native';
+import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
 /**
@@ -86,119 +86,125 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 			contentStyle={ styles.contentContainer }
 			testID="editor-help-modal"
 		>
-			<BottomSheet.NavigationContainer
-				animate
-				main
-				style={ styles.navigationContainer }
-			>
-				<BottomSheet.NavigationScreen
-					isScrollable
-					fullScreen
-					name="help-topics"
+			<SafeAreaView>
+				<BottomSheet.NavigationContainer
+					animate
+					main
+					style={ styles.navigationContainer }
 				>
-					<View style={ styles.container }>
-						<BottomSheet.NavBar>
-							<BottomSheet.NavBar.DismissButton
-								onPress={ close }
-								iosText={ __( 'Close' ) }
-							/>
-							<BottomSheet.NavBar.Heading>
-								{ title }
-							</BottomSheet.NavBar.Heading>
-						</BottomSheet.NavBar>
-						<BottomSheetConsumer>
-							{ ( { listProps } ) => {
-								const contentContainerStyle = StyleSheet.flatten(
-									listProps.contentContainerStyle
-								);
-								return (
-									<ScrollView
-										{ ...listProps }
-										contentContainerStyle={ {
-											...contentContainerStyle,
-											paddingBottom: Math.max(
-												listProps.safeAreaBottomInset,
-												contentContainerStyle.paddingBottom
-											),
-											/**
-											 * Remove margin set via `hideHeader`. Combining a header
-											 * and navigation in this bottom sheet is at odds with the
-											 * current `BottomSheet` implementation.
-											 */
-											marginTop: 0,
-										} }
-									>
-										<PanelBody>
-											<Text style={ sectionTitle }>
-												{ __( 'The basics' ) }
-											</Text>
-											{ /* Print out help topics */ }
-											{ HELP_TOPICS.map(
-												( { label, icon } ) => {
-													const labelSlug = kebabCase(
-														label
-													);
-													return (
-														<HelpTopicRow
-															key={ labelSlug }
-															label={ label }
-															icon={ icon }
-															screenName={
-																labelSlug
-															}
-														/>
-													);
-												}
-											) }
-											{
+					<BottomSheet.NavigationScreen
+						isScrollable
+						fullScreen
+						name="help-topics"
+					>
+						<View style={ styles.container }>
+							<BottomSheet.NavBar>
+								<BottomSheet.NavBar.DismissButton
+									onPress={ close }
+									iosText={ __( 'Close' ) }
+								/>
+								<BottomSheet.NavBar.Heading>
+									{ title }
+								</BottomSheet.NavBar.Heading>
+							</BottomSheet.NavBar>
+							<BottomSheetConsumer>
+								{ ( { listProps } ) => {
+									const contentContainerStyle = StyleSheet.flatten(
+										listProps.contentContainerStyle
+									);
+									return (
+										<ScrollView
+											{ ...listProps }
+											contentContainerStyle={ {
+												...contentContainerStyle,
+												paddingBottom: Math.max(
+													listProps.safeAreaBottomInset,
+													contentContainerStyle.paddingBottom
+												),
+												/**
+												 * Remove margin set via `hideHeader`. Combining a header
+												 * and navigation in this bottom sheet is at odds with the
+												 * current `BottomSheet` implementation.
+												 */
+												marginTop: 0,
+											} }
+										>
+											<PanelBody>
 												<Text style={ sectionTitle }>
-													{ __( 'Get support' ) }
+													{ __( 'The basics' ) }
 												</Text>
-											}
-											{
-												<HelpGetSupportButton
-													title={ __(
-														'Contact support'
-													) }
-													onPress={
-														requestContactCustomerSupport
+												{ /* Print out help topics */ }
+												{ HELP_TOPICS.map(
+													( { label, icon } ) => {
+														const labelSlug = kebabCase(
+															label
+														);
+														return (
+															<HelpTopicRow
+																key={
+																	labelSlug
+																}
+																label={ label }
+																icon={ icon }
+																screenName={
+																	labelSlug
+																}
+															/>
+														);
 													}
-												/>
-											}
-											{
-												<HelpGetSupportButton
-													title={ __(
-														'More support options'
-													) }
-													onPress={
-														requestGotoCustomerSupportOptions
-													}
-												/>
-											}
-										</PanelBody>
-									</ScrollView>
-								);
-							} }
-						</BottomSheetConsumer>
-					</View>
-				</BottomSheet.NavigationScreen>
-				{ /* Print out help detail screens */ }
-				{ HELP_TOPICS.map( ( { view, label } ) => {
-					const labelSlug = kebabCase( label );
-					return (
-						<HelpDetailNavigationScreen
-							key={ labelSlug }
-							name={ labelSlug }
-							content={ view }
-							label={ label }
-							options={ {
-								gestureEnabled: true,
-								...TransitionPresets.DefaultTransition,
-							} }
-						/>
-					);
-				} ) }
-			</BottomSheet.NavigationContainer>
+												) }
+												{
+													<Text
+														style={ sectionTitle }
+													>
+														{ __( 'Get support' ) }
+													</Text>
+												}
+												{
+													<HelpGetSupportButton
+														title={ __(
+															'Contact support'
+														) }
+														onPress={
+															requestContactCustomerSupport
+														}
+													/>
+												}
+												{
+													<HelpGetSupportButton
+														title={ __(
+															'More support options'
+														) }
+														onPress={
+															requestGotoCustomerSupportOptions
+														}
+													/>
+												}
+											</PanelBody>
+										</ScrollView>
+									);
+								} }
+							</BottomSheetConsumer>
+						</View>
+					</BottomSheet.NavigationScreen>
+					{ /* Print out help detail screens */ }
+					{ HELP_TOPICS.map( ( { view, label } ) => {
+						const labelSlug = kebabCase( label );
+						return (
+							<HelpDetailNavigationScreen
+								key={ labelSlug }
+								name={ labelSlug }
+								content={ view }
+								label={ label }
+								options={ {
+									gestureEnabled: true,
+									...TransitionPresets.DefaultTransition,
+								} }
+							/>
+						);
+					} ) }
+				</BottomSheet.NavigationContainer>
+			</SafeAreaView>
 		</BottomSheet>
 	);
 }