Mobile profile header redesign (#14100)

Author: dylanjeffers

packages/mobile/src/screens/app-screen/AppTabScreen.tsx

@@ -219,7 +219,11 @@ export const AppTabScreen = ({ baseScreen, Stack }: AppTabScreenProps) => {
       <Stack.Screen name='Track' component={TrackScreen} />
       <Stack.Screen name='TrackRemixes' component={TrackRemixesScreen} />
       <Stack.Screen name='Collection' component={CollectionScreen} />
-      <Stack.Screen name='Profile' component={ProfileScreen} />
+      <Stack.Screen
+        name='Profile'
+        component={ProfileScreen}
+        options={{ headerShown: false }}
+      />
       <Stack.Group>
         <Stack.Screen name='Followers' component={FollowersScreen} />
         <Stack.Screen name='Following' component={FollowingScreen} />

packages/mobile/src/screens/profile-screen/ProfileCoverPhoto.tsx

@@ -1,32 +1,65 @@
-import { useProfileUser } from '@audius/common/api'
+import { useCallback } from 'react'
+
+import { useCurrentUserId, useProfileUser } from '@audius/common/api'
+import { ShareSource } from '@audius/common/models'
+import { modalsActions, shareModalUIActions } from '@audius/common/store'
 import { BlurView } from '@react-native-community/blur'
 import { StyleSheet } from 'react-native'
 import { useCurrentTabScrollY } from 'react-native-collapsible-tab-view'
 import Animated, {
   interpolate,
   useAnimatedStyle
 } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useDispatch } from 'react-redux'
 
-import { Flex } from '@audius/harmony-native'
+import {
+  Flex,
+  IconButton,
+  IconCaretLeft,
+  IconKebabHorizontal,
+  IconShare
+} from '@audius/harmony-native'
 import BadgeArtist from 'app/assets/images/badgeArtist.svg'
 import { CoverPhoto } from 'app/components/image/CoverPhoto'
+import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles } from 'app/styles'
 
+const { requestOpen: requestOpenShareModal } = shareModalUIActions
+const { setVisibility } = modalsActions
+
 const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
 
+// Height below the status bar. The avatar is 80px tall and is positioned so
+// it extends ~32px below the cover photo, matching the Figma spec.
+const COVER_PHOTO_CONTENT_HEIGHT = 96
+
 const useStyles = makeStyles(({ spacing }) => ({
-  coverPhoto: {
-    height: 96
+  darkOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.2)'
+  },
+  actionsRow: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    paddingHorizontal: spacing(4),
+    paddingVertical: spacing(2)
   },
   artistBadge: {
     position: 'absolute',
-    top: spacing(3),
-    right: spacing(3)
+    right: spacing(4),
+    bottom: spacing(2)
   }
 }))
 
 export const ProfileCoverPhoto = () => {
   const styles = useStyles()
+  const insets = useSafeAreaInsets()
+  const dispatch = useDispatch()
+  const navigation = useNavigation()
+  const { data: accountId } = useCurrentUserId()
+
   const { user_id, track_count } =
     useProfileUser({
       select: (user) => ({
@@ -37,7 +70,9 @@ export const ProfileCoverPhoto = () => {
 
   const scrollY = useCurrentTabScrollY()
 
-  const isArtist = track_count && track_count > 0
+  const isArtist = !!track_count && track_count > 0
+  const isOwner = !!user_id && user_id === accountId
+  const coverPhotoHeight = insets.top + COVER_PHOTO_CONTENT_HEIGHT
 
   const blurViewStyle = useAnimatedStyle(() => ({
     ...StyleSheet.absoluteFillObject,
@@ -49,7 +84,6 @@ export const ProfileCoverPhoto = () => {
   }))
 
   const badgeStyle = useAnimatedStyle(() => ({
-    ...styles.artistBadge,
     transform: [
       {
         translateY: interpolate(scrollY.value, [-200, 0], [-200, 0], {
@@ -60,19 +94,70 @@ export const ProfileCoverPhoto = () => {
     ]
   }))
 
+  const handleBack = useCallback(() => {
+    navigation.goBack()
+  }, [navigation])
+
+  const handlePressActions = useCallback(() => {
+    if (!user_id) return
+    if (!isOwner) {
+      dispatch(
+        setVisibility({
+          modal: 'ProfileActions',
+          visible: true
+        })
+      )
+    } else {
+      dispatch(
+        requestOpenShareModal({
+          type: 'profile',
+          profileId: user_id,
+          source: ShareSource.PAGE
+        })
+      )
+    }
+  }, [dispatch, isOwner, user_id])
+
   if (!user_id) return null
 
   return (
-    <Flex pointerEvents='none' h={96} backgroundColor='surface2'>
-      <CoverPhoto style={styles.coverPhoto} userId={user_id}>
+    <Flex
+      pointerEvents='box-none'
+      h={coverPhotoHeight}
+      backgroundColor='surface2'
+    >
+      <CoverPhoto style={{ height: coverPhotoHeight }} userId={user_id}>
         <AnimatedBlurView
           blurType='dark'
           blurAmount={100}
           style={blurViewStyle}
         />
+        {isArtist ? <Animated.View style={styles.darkOverlay} /> : null}
       </CoverPhoto>
+      <Flex
+        direction='row'
+        justifyContent='space-between'
+        alignItems='center'
+        pointerEvents='box-none'
+        style={[styles.actionsRow, { top: insets.top }]}
+      >
+        <IconButton
+          icon={IconCaretLeft}
+          color='staticWhite'
+          shadow='emphasis'
+          onPress={handleBack}
+          aria-label='Back'
+        />
+        <IconButton
+          icon={isOwner ? IconShare : IconKebabHorizontal}
+          color='staticWhite'
+          shadow='emphasis'
+          onPress={handlePressActions}
+          aria-label={isOwner ? 'Share profile' : 'Profile actions'}
+        />
+      </Flex>
       {isArtist ? (
-        <Animated.View style={badgeStyle}>
+        <Animated.View style={[styles.artistBadge, badgeStyle]}>
           <BadgeArtist />
         </Animated.View>
       ) : null}

packages/mobile/src/screens/profile-screen/ProfileHeader/ProfileHeader.tsx

@@ -9,6 +9,7 @@ import {
 import { useTierAndVerifiedForUser } from '@audius/common/store'
 import { css } from '@emotion/native'
 import { LayoutAnimation } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useToggle } from 'react-use'
 
 import { Box, Divider, Flex, useTheme } from '@audius/harmony-native'
@@ -101,15 +102,16 @@ export const ProfileHeader = memo(() => {
   }, [isExpanded, setIsExpanded])
 
   const { spacing } = useTheme()
+  const insets = useSafeAreaInsets()
 
   return (
     <>
       <ProfileCoverPhoto />
       <Box
         style={css({
           position: 'absolute',
-          top: spacing.unit13,
-          left: spacing.unit3,
+          top: insets.top + spacing.unit12,
+          left: spacing.unit4,
           zIndex: zIndex.PROFILE_PAGE_PROFILE_PICTURE
         })}
       >

packages/mobile/src/screens/profile-screen/ProfileScreen.tsx

@@ -1,12 +1,9 @@
 import { useCallback } from 'react'
 
-import { useCurrentUserId, useUserByParams } from '@audius/common/api'
-import { ShareSource } from '@audius/common/models'
+import { useUserByParams } from '@audius/common/api'
 import {
   profilePageActions,
   reachabilitySelectors,
-  shareModalUIActions,
-  modalsActions,
   ProfilePageTabs
 } from '@audius/common/store'
 import { encodeUrlName } from '@audius/common/utils'
@@ -15,27 +12,21 @@ import { useFocusEffect, useNavigationState } from '@react-navigation/native'
 import { View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
-import {
-  IconButton,
-  IconKebabHorizontal,
-  IconShare
-} from '@audius/harmony-native'
 import { Screen, ScreenContent } from 'app/components/core'
 import { ScreenPrimaryContent } from 'app/components/core/Screen/ScreenPrimaryContent'
 import { ScreenSecondaryContent } from 'app/components/core/Screen/ScreenSecondaryContent'
 import { OfflinePlaceholder } from 'app/components/offline-placeholder'
 import { useRoute } from 'app/hooks/useRoute'
+import { useStatusBarStyle } from 'app/hooks/useStatusBarStyle'
 import { makeStyles } from 'app/styles'
 
 import { DeactivatedProfileTombstone } from './DeactivatedProfileTombstone'
 import { ProfileHeader } from './ProfileHeader'
 import { ProfileScreenSkeleton } from './ProfileScreenSkeleton'
 import { ProfileTabNavigator } from './ProfileTabs/ProfileTabNavigator'
 import { useRefreshProfile } from './useRefreshProfile'
-const { requestOpen: requestOpenShareModal } = shareModalUIActions
 const { setCurrentUser: setCurrentUserAction } = profilePageActions
 const { getIsReachable } = reachabilitySelectors
-const { setVisibility } = modalsActions
 
 const useStyles = makeStyles(() => ({
   navigator: {
@@ -59,8 +50,6 @@ export const ProfileScreen = () => {
   const handle =
     userHandle && userHandle !== 'accountUser' ? userHandle : profile?.handle
   const handleLower = handle?.toLowerCase() ?? ''
-  const { data: accountUserId } = useCurrentUserId()
-  const isOwner = accountUserId === profile?.user_id
   const dispatch = useDispatch()
   const isNotReachable = useSelector(getIsReachable) === false
 
@@ -104,43 +93,12 @@ export const ProfileScreen = () => {
   )
 
   useFocusEffect(setCurrentUser)
-
-  const handlePressTopRight = useCallback(() => {
-    if (profile) {
-      if (!isOwner) {
-        dispatch(
-          setVisibility({
-            modal: 'ProfileActions',
-            visible: true
-          })
-        )
-      } else {
-        dispatch(
-          requestOpenShareModal({
-            type: 'profile',
-            profileId: profile.user_id,
-            source: ShareSource.PAGE
-          })
-        )
-      }
-    }
-  }, [profile, dispatch, isOwner])
-
-  const topbarRight = (
-    <IconButton
-      color='subdued'
-      icon={!isOwner ? IconKebabHorizontal : IconShare}
-      onPress={handlePressTopRight}
-    />
-  )
+  useStatusBarStyle('light-content')
 
   const renderHeader = useCallback(() => <ProfileHeader />, [])
 
   return (
-    <Screen
-      topbarRight={topbarRight}
-      url={handle && `/${encodeUrlName(handle)}`}
-    >
+    <Screen url={handle && `/${encodeUrlName(handle)}`}>
       <ScreenContent isOfflineCapable>
         {!profile ? (
           <ProfileScreenSkeleton />