chore: refactor onLayout usage

package.json

@@ -109,7 +109,7 @@
   "dependencies": {
     "@artsy/cohesion": "4.336.0",
     "@artsy/icons": "3.64.0",
-    "@artsy/palette-mobile": "22.6.0--canary.425.5263.0",
+    "@artsy/palette-mobile": "22.6.0--canary.425.5275.0",
     "@artsy/to-title-case": "1.2.0",
     "@braze/react-native-sdk": "16.1.0",
     "@d11/react-native-fast-image": "8.12.0",

src/app/Components/Artist/ArtistAbout/ArtistAbout.tsx

@@ -1,5 +1,5 @@
 import { ContextModule, OwnerType } from "@artsy/cohesion"
-import { Flex, Join, Spacer, Tabs } from "@artsy/palette-mobile"
+import { Flex, Spacer, Tabs, useSpace } from "@artsy/palette-mobile"
 import { ArtistAbout_artist$data } from "__generated__/ArtistAbout_artist.graphql"
 import { Articles } from "app/Components/Artist/Articles/Articles"
 import { ArtistAboutEmpty } from "app/Components/Artist/ArtistAbout/ArtistAboutEmpty"
@@ -9,6 +9,7 @@ import { RelatedArtistsRail } from "app/Components/Artist/RelatedArtistsRail"
 import { SectionTitle } from "app/Components/SectionTitle"
 import { ArtistSeriesMoreSeriesFragmentContainer } from "app/Scenes/ArtistSeries/ArtistSeriesMoreSeries"
 import { extractNodes } from "app/utils/extractNodes"
+import { compact } from "lodash"
 import { createFragmentContainer, graphql } from "react-relay"
 import { ArtistAboutShowsFragmentContainer } from "./ArtistAboutShows"
 import { ArtistCareerHighlights } from "./ArtistCareerHighlights"
@@ -18,6 +19,8 @@ interface Props {
 }
 
 export const ArtistAbout: React.FC<Props> = ({ artist }) => {
+  const space = useSpace()
+
   const articles = extractNodes(artist.articlesConnection)
   const relatedArtists = extractNodes(artist.related?.artistsConnection)
   const relatedGenes = extractNodes(artist.related?.genes)
@@ -38,39 +41,82 @@ export const ArtistAbout: React.FC<Props> = ({ artist }) => {
     hasRelatedArtists ||
     hasRelatedGenes
 
+  const data = compact([
+    hasBiography && {
+      key: "biography",
+      content: (
+        <>
+          <Spacer y={1} />
+          <Flex maxWidth={MAX_WIDTH_BIO} px={2}>
+            <SectionTitle title="Biography" />
+            <Biography artist={artist} />
+          </Flex>
+        </>
+      ),
+    },
+
+    !!hasInsights && {
+      key: "insights",
+      content: <ArtistCareerHighlights artist={artist} />,
+    },
+
+    !!hasArtistSeries && {
+      key: "artistSeries",
+      content: (
+        <ArtistSeriesMoreSeriesFragmentContainer
+          px={2}
+          contextScreenOwnerId={artist.internalID}
+          contextScreenOwnerSlug={artist.slug}
+          contextScreenOwnerType={OwnerType.artist}
+          contextModule={ContextModule.artistSeriesRail}
+          artist={artist}
+          artistSeriesHeader="Top Artist Series"
+        />
+      ),
+    },
+
+    !!hasArticles && {
+      key: "articles",
+      content: <Articles articles={articles} artist={artist} />,
+    },
+
+    !!hasShows && {
+      key: "shows",
+      content: <ArtistAboutShowsFragmentContainer artist={artist} />,
+    },
+
+    !!hasRelatedArtists && {
+      key: "relatedArtists",
+      content: <RelatedArtistsRail artists={relatedArtists} artist={artist} />,
+    },
+    !!hasRelatedGenes && {
+      key: "relatedGenes",
+      content: <ArtistAboutRelatedGenes genes={relatedGenes} />,
+    },
+  ])
+
+  return (
+    <Tabs.FlashList
+      data={isDisplayable ? data : []}
+      renderItem={({ item }) => item?.content}
+      keyExtractor={(item) => item?.key}
+      ItemSeparatorComponent={() => <Spacer y={4} />}
+      contentContainerStyle={{ paddingHorizontal: 0, paddingVertical: space(4) }}
+      ListEmptyComponent={() => <ArtistAboutEmpty my={6} />}
+    />
+  )
+
   return (
     <Tabs.ScrollView contentContainerStyle={{ paddingHorizontal: 0 }}>
       {isDisplayable ? (
         <>
           <Spacer y={2} />
-          <Join separator={<Spacer y={4} />}>
-            {!!hasBiography && (
-              <>
-                <Spacer y={1} />
-                <Flex maxWidth={MAX_WIDTH_BIO} px={2}>
-                  <SectionTitle title="Biography" />
-                  <Biography artist={artist} />
-                </Flex>
-              </>
-            )}
-            {!!hasInsights && <ArtistCareerHighlights artist={artist} />}
-            {!!hasArtistSeries && (
-              <ArtistSeriesMoreSeriesFragmentContainer
-                px={2}
-                contextScreenOwnerId={artist.internalID}
-                contextScreenOwnerSlug={artist.slug}
-                contextScreenOwnerType={OwnerType.artist}
-                contextModule={ContextModule.artistSeriesRail}
-                artist={artist}
-                artistSeriesHeader="Top Artist Series"
-              />
-            )}
-            {!!hasArticles && <Articles articles={articles} artist={artist} />}
-            {!!hasShows && <ArtistAboutShowsFragmentContainer artist={artist} />}
-
-            {!!hasRelatedArtists && <RelatedArtistsRail artists={relatedArtists} artist={artist} />}
-            {!!hasRelatedGenes && <ArtistAboutRelatedGenes genes={relatedGenes} />}
-          </Join>
+          <Tabs.FlashList
+            data={data}
+            renderItem={({ item }) => item?.content}
+            keyExtractor={(item) => item?.key}
+            contentContainerStyle={{ paddingHorizontal: 0 }}
+          />
           <Spacer y={4} />
         </>
       ) : (

src/app/Components/Artist/ArtistHeader.tsx

@@ -15,7 +15,8 @@ import {
   ArtistHeader_artist$key,
 } from "__generated__/ArtistHeader_artist.graphql"
 import { RouterLink } from "app/system/navigation/RouterLink"
-import { FlatList, LayoutChangeEvent, ViewProps } from "react-native"
+import { useLayoutEffect, useRef } from "react"
+import { FlatList, View } from "react-native"
 import { isTablet } from "react-native-device-info"
 import { graphql, useFragment } from "react-relay"
 import { useTracking } from "react-tracking"
@@ -28,7 +29,6 @@ const ARTIST_HEADER_SCROLL_MARGIN = 100
 
 interface Props {
   artist: ArtistHeader_artist$key
-  onLayoutChange?: ViewProps["onLayout"]
 }
 
 export const useArtistHeaderImageDimensions = () => {
@@ -46,14 +46,23 @@ export const useArtistHeaderImageDimensions = () => {
   }
 }
 
-export const ArtistHeader: React.FC<Props> = ({ artist, onLayoutChange }) => {
+export const ArtistHeader: React.FC<Props> = ({ artist }) => {
   const space = useSpace()
 
   const { width, height, aspectRatio } = useArtistHeaderImageDimensions()
-  const { updateScrollYOffset } = useScreenScrollContext()
+  const { scrollYOffsetAnimated } = useScreenScrollContext()
   const { trackEvent } = useTracking()
+  const headerRef = useRef<View>(null)
   const artistData = useFragment(artistFragment, artist)
 
+  useLayoutEffect(() => {
+    headerRef.current?.measureInWindow((_x, _y, _measuredWidth, measuredHeight) => {
+      if (measuredHeight > 0) {
+        scrollYOffsetAnimated.value = measuredHeight - ARTIST_HEADER_SCROLL_MARGIN
+      }
+    })
+  }, [])
+
   if (!artistData) {
     return null
   }
@@ -64,15 +73,8 @@ export const ArtistHeader: React.FC<Props> = ({ artist, onLayoutChange }) => {
 
   const hasVerifiedRepresentatives = artistData.verifiedRepresentatives?.length > 0
 
-  const handleOnLayout = ({ nativeEvent, ...rest }: LayoutChangeEvent) => {
-    if (nativeEvent.layout.height > 0) {
-      updateScrollYOffset(nativeEvent.layout.height - ARTIST_HEADER_SCROLL_MARGIN)
-      onLayoutChange?.({ nativeEvent, ...rest })
-    }
-  }
-
   return (
-    <Flex pointerEvents="box-none" onLayout={handleOnLayout}>
+    <Flex pointerEvents="box-none" ref={headerRef}>
       {!!artistData?.coverArtwork?.image?.url && (
         <Flex pointerEvents="none">
           <Image

src/app/Components/Artist/ArtistHeaderNavRight.tsx

@@ -24,7 +24,7 @@ export const ArtistHeaderNavRight: React.FC<ArtistHeaderNavRightProps> = ({
   artist: artistProp,
 }) => {
   const space = useSpace()
-  const { currentScrollYAnimated, scrollYOffset } = useScreenScrollContext()
+  const { currentScrollYAnimated, scrollYOffsetAnimated } = useScreenScrollContext()
   const artist = useFragment(fragment, artistProp)
   const [isFollowed, setIsFollowed] = useState(!!artist?.isFollowed)
 
@@ -45,8 +45,12 @@ export const ArtistHeaderNavRight: React.FC<ArtistHeaderNavRightProps> = ({
   )
 
   const followAreaDeltaX = (followButtonWidth + space(2)) * PixelRatio.getFontScale()
+
   const displayFollowButton = useDerivedValue(() => {
-    return !scrollYOffset || currentScrollYAnimated.value < scrollYOffset + NAVBAR_HEIGHT
+    return (
+      !scrollYOffsetAnimated.value ||
+      currentScrollYAnimated.value < scrollYOffsetAnimated.value + NAVBAR_HEIGHT
+    )
   })
 
   // convert the space into primitive types to be user on the UI thread