Merge pull request #3187 from inaturalist/995-SafeAreaView-migration-regressions

995 safe area view migration regressions

src/components/Explore/SearchScreens/ExploreTaxonSearch.js

@@ -2,7 +2,8 @@
 
 import {
   TaxonResult,
-  TaxonSearch
+  TaxonSearch,
+  ViewWrapper
 } from "components/SharedComponents";
 import type { Node } from "react";
 import React, {
@@ -67,22 +68,22 @@ const ExploreTaxonSearch = ( {
   ] );
 
   return (
-    <TaxonSearch
-      header={(
-        <ExploreSearchHeader
-          closeModal={closeModal}
-          headerText={t( "SEARCH-TAXA" )}
-          resetFilters={resetTaxon}
-          testID="ExploreTaxonSearch.close"
-        />
-      )}
-      isLoading={isLoading}
-      isLocal={isLocal}
-      query={taxonQuery}
-      renderItem={renderItem}
-      setQuery={setTaxonQuery}
-      taxa={taxa}
-    />
+    <ViewWrapper>
+      <ExploreSearchHeader
+        closeModal={closeModal}
+        headerText={t( "SEARCH-TAXA" )}
+        resetFilters={resetTaxon}
+        testID="ExploreTaxonSearch.close"
+      />
+      <TaxonSearch
+        isLoading={isLoading}
+        isLocal={isLocal}
+        query={taxonQuery}
+        renderItem={renderItem}
+        setQuery={setTaxonQuery}
+        taxa={taxa}
+      />
+    </ViewWrapper>
   );
 };
 

src/components/FullPageWebView/FullPageWebView.tsx

@@ -226,7 +226,7 @@ const FullPageWebView = ( ) => {
 
   return (
     <Mortal>
-      <ViewWrapper>
+      <ViewWrapper useTopInset={false}>
         {( !params.loggedIn || source.headers ) && (
           <WebView
             // eslint-disable-next-line @typescript-eslint/no-empty-function

src/components/Match/MatchContainer.js

@@ -461,7 +461,7 @@ const MatchContainer = ( ) => {
 
   return (
     <>
-      <ViewWrapper isDebug={isDebug}>
+      <ViewWrapper isDebug={isDebug} useTopInset={false}>
         <Match
           observation={currentObservation}
           obsPhotos={obsPhotos}

src/components/ProjectList/ProjectListContainer.tsx

@@ -20,7 +20,7 @@ const ProjectListContainer = ( ) => {
   }, [headerOptions, navigation] );
 
   return (
-    <ViewWrapper>
+    <ViewWrapper useTopInset={false}>
       <View className="border-b border-lightGray mt-5" />
       <ProjectList
         projects={projects}

src/components/SharedComponents/TaxonSearch.tsx

@@ -17,7 +17,6 @@ const DROP_SHADOW = getShadow( {
 } );
 
 interface Props {
-  header?: React.FC;
   query?: string;
   setQuery: ( newQuery: string ) => void;
   isLoading?: boolean;
@@ -29,7 +28,6 @@ interface Props {
 }
 
 const TaxonSearch = ( {
-  header,
   isLoading = false,
   isLocal = false,
   query = "",
@@ -61,8 +59,7 @@ const TaxonSearch = ( {
   ), [keyboardHeight, keyboardShown] );
 
   return (
-    <ViewWrapper>
-      {header}
+    <ViewWrapper useTopInset={false}>
       <View
         className="bg-white px-6 pt-2 pb-[21px]"
         style={DROP_SHADOW}

src/components/SharedComponents/ViewWrapper.tsx

@@ -12,15 +12,22 @@ interface Props extends PropsWithChildren {
   // If someone can explain to me why className doesn't work here, I'm all
   // ears ~~~kueda 20230815
   wrapperClassName?: string;
+  useTopInset?: boolean;
 }
 
 const ViewWrapper = ( {
   children,
   isDebug,
   wrapperClassName,
-  testID
+  testID,
+  useTopInset = true
 }: Props ) => {
   const insets = useSafeAreaInsets();
+  const viewStyle = {
+    paddingTop: useTopInset
+      ? insets.top
+      : 0
+  };
   return (
     <View
       className={classnames(
@@ -31,10 +38,7 @@ const ViewWrapper = ( {
           ? "border-2 border-deepPink"
           : null
       )}
-      style={{
-        paddingTop: insets.top,
-        paddingBottom: insets.bottom
-      }}
+      style={viewStyle}
       testID={testID}
     >
       {isDebug && (

src/components/Suggestions/Suggestions.js

@@ -178,7 +178,7 @@ const Suggestions = ( {
   const sections = createSections( );
 
   return (
-    <ViewWrapper testID="suggestions">
+    <ViewWrapper testID="suggestions" useTopInset={false}>
       <SectionList
         ListEmptyComponent={renderEmptyList}
         ListFooterComponent={renderFooter}

src/components/UserProfile/FollowersList.tsx

@@ -69,7 +69,7 @@ const FollowersList = ( ) => {
   }
 
   return (
-    <ViewWrapper>
+    <ViewWrapper useTopInset={false}>
       <View className="border-b border-lightGray mt-5" />
       <UserList
         users={followers}

src/components/UserProfile/FollowingList.tsx

@@ -69,7 +69,7 @@ const FollowingList = ( ) => {
   }
 
   return (
-    <ViewWrapper>
+    <ViewWrapper useTopInset={false}>
       <View className="border-b border-lightGray mt-5" />
       <UserList
         users={following}

src/navigation/ContextHeader.js

@@ -6,6 +6,7 @@ import BackButton from "components/SharedComponents/Buttons/BackButton";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { dropShadow } from "styles/global";
 import colors from "styles/tailwindColors";
 
@@ -18,6 +19,8 @@ type Props = {
 const ContextHeader = ( {
   navigation, route, options
 }: Props ): Node => {
+  const insets = useSafeAreaInsets();
+
   const customTitleComponent = typeof options.headerTitle === "function";
   const subtitle = options.headerSubtitle;
 
@@ -68,7 +71,8 @@ const ContextHeader = ( {
       className="bg-white"
       style={{
         ...options.headerStyle,
-        ...( options.headerShadowVisible && dropShadow )
+        ...( options.headerShadowVisible && dropShadow ),
+        paddingTop: insets.top
       }}
     >
       <View