[C-3026] Close now-playing when sharing to dm (#3966)

packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx

@@ -133,10 +133,6 @@ export const NowPlayingDrawer = memo(function NowPlayingDrawer(
     }
   }, [isPlaying, isPlayBarShowing])
 
-  const handleDrawerCloseFromSwipe = useCallback(() => {
-    onClose()
-  }, [onClose])
-
   const onDrawerOpen = useCallback(() => {
     Keyboard.dismiss()
     onOpen()
@@ -268,23 +264,23 @@ export const NowPlayingDrawer = memo(function NowPlayingDrawer(
       return
     }
     navigation?.push('Profile', { handle: user.handle })
-    handleDrawerCloseFromSwipe()
-  }, [handleDrawerCloseFromSwipe, navigation, user])
+    onClose()
+  }, [onClose, navigation, user])
 
   const handlePressTitle = useCallback(() => {
     if (!trackId) {
       return
     }
     navigation?.push('Track', { id: trackId })
-    handleDrawerCloseFromSwipe()
-  }, [handleDrawerCloseFromSwipe, navigation, trackId])
+    onClose()
+  }, [onClose, navigation, trackId])
 
   return (
     <Drawer
       // Appears below bottom bar whereas normally drawers appear above
       zIndex={3}
       isOpen={isOpen}
-      onClose={handleDrawerCloseFromSwipe}
+      onClose={onClose}
       onOpen={onDrawerOpen}
       initialOffsetPosition={BOTTOM_BAR_HEIGHT + PLAY_BAR_HEIGHT}
       shouldCloseToInitialOffset={isPlayBarShowing}
@@ -318,7 +314,7 @@ export const NowPlayingDrawer = memo(function NowPlayingDrawer(
         </View>
         <Logo translationAnim={translationAnim} />
         <View style={styles.titleBarContainer}>
-          <TitleBar onClose={handleDrawerCloseFromSwipe} />
+          <TitleBar onClose={onClose} />
         </View>
         <Pressable onPress={handlePressTitle} style={styles.artworkContainer}>
           <Artwork track={track} />

packages/mobile/src/components/share-drawer/ShareDrawer.tsx

@@ -7,6 +7,7 @@ import {
   Name,
   shareModalUISelectors,
   shareSoundToTiktokModalActions,
+  ShareSource,
   tracksSocialActions,
   usersSocialActions
 } from '@audius/common'
@@ -22,6 +23,7 @@ import IconShare from 'app/assets/images/iconShare.svg'
 import IconSnapchat from 'app/assets/images/iconSnapchat.svg'
 import TikTokIcon from 'app/assets/images/iconTikTokInverted.svg'
 import IconTwitterBird from 'app/assets/images/iconTwitterBird.svg'
+import { useDrawer } from 'app/hooks/useDrawer'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useToast } from 'app/hooks/useToast'
@@ -53,7 +55,6 @@ const useStyles = makeStyles(({ spacing }) => ({
     paddingBottom: spacing(4)
   },
   title: {
-    display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
@@ -93,6 +94,7 @@ export const ShareDrawer = () => {
     FeatureFlags.SHARE_SOUND_TO_TIKTOK
   )
   const { onClose } = useDrawerState('Share')
+  const { onClose: onCloseNowPlaying } = useDrawer('NowPlaying')
 
   const { secondary, neutralLight2 } = useThemeColors()
   const dispatch = useDispatch()
@@ -115,7 +117,10 @@ export const ShareDrawer = () => {
       defaultUserList: 'chats'
     })
     track(make({ eventName: Name.CHAT_ENTRY_POINT, source: 'share' }))
-  }, [content, navigation])
+    if (source === ShareSource.NOW_PLAYING) {
+      onCloseNowPlaying()
+    }
+  }, [content, navigation, source, onCloseNowPlaying])
 
   const handleShareToTwitter = useCallback(async () => {
     if (!content) return