[C-2923] Fix toasts in modal screens (#3838)

packages/mobile/src/components/core/ModalScreen.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react'
+
+import { Toasts } from '../toasts'
+
+type ModalScreenProps = {
+  children: ReactNode
+}
+
+export const ModalScreen = (props: ModalScreenProps) => {
+  const { children } = props
+  return (
+    <>
+      <Toasts />
+      {children}
+    </>
+  )
+}

packages/mobile/src/components/core/index.ts

@@ -39,3 +39,4 @@ export * from './KeyboardAvoidingView'
 export * from './InputErrorMessage'
 export * from './DogEar'
 export * from './LockedStatusBadge'
+export * from './ModalScreen'

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

@@ -3,11 +3,11 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'
 
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 
-import { EditPlaylistScreen } from '../edit-playlist-screen'
-import { EditExistingTrackScreen } from '../edit-track-screen'
-import { TipArtistModal } from '../tip-artist-screen'
-import { UploadScreen } from '../upload-screen'
-import { WalletConnectScreen } from '../wallet-connect'
+import { EditPlaylistModalScreen } from '../edit-playlist-screen'
+import { EditTrackModalScreen } from '../edit-track-screen'
+import { TipArtistModalScreen } from '../tip-artist-screen'
+import { UploadModalScreen } from '../upload-screen'
+import { WalletConnectModalScreen } from '../wallet-connect'
 
 import { AppTabsScreen } from './AppTabsScreen'
 
@@ -23,29 +23,29 @@ export const AppScreen = () => {
       <Stack.Screen name='AppTabs' component={AppTabsScreen} />
       <Stack.Screen
         name='TipArtist'
-        component={TipArtistModal}
+        component={TipArtistModalScreen}
         options={modalScreenOptions}
       />
       <Stack.Screen
         name='Upload'
-        component={UploadScreen}
+        component={UploadModalScreen}
         options={modalScreenOptions}
       />
       <Stack.Screen
         name='EditTrack'
-        component={EditExistingTrackScreen}
+        component={EditTrackModalScreen}
         options={modalScreenOptions}
       />
       {isPlaylistUpdatesEnabled ? (
         <Stack.Screen
           name='EditPlaylist'
-          component={EditPlaylistScreen}
+          component={EditPlaylistModalScreen}
           options={modalScreenOptions}
         />
       ) : null}
       <Stack.Screen
         name='WalletConnect'
-        component={WalletConnectScreen}
+        component={WalletConnectModalScreen}
         options={modalScreenOptions}
       />
     </Stack.Navigator>

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistScreen.tsx → packages/mobile/src/screens/edit-playlist-screen/EditPlaylistModalScreen.tsx

@@ -10,6 +10,7 @@ import {
 import { Formik } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { ModalScreen } from 'app/components/core'
 import { useCollectionImage } from 'app/components/image/CollectionImage'
 import { isImageUriSource } from 'app/hooks/useContentNodeImage'
 
@@ -18,7 +19,7 @@ import { EditPlaylistNavigator } from './EditPlaylistNavigator'
 const { getMetadata } = createPlaylistModalUISelectors
 const { editPlaylist } = cacheCollectionsActions
 
-export const EditPlaylistScreen = () => {
+export const EditPlaylistModalScreen = () => {
   const playlist = useSelector(getMetadata)
   const dispatch = useDispatch()
 
@@ -50,17 +51,19 @@ export const EditPlaylistScreen = () => {
   }
 
   return (
-    <Formik
-      initialValues={initialValues}
-      initialStatus={{ imageLoading: false, imageGenerating: false }}
-      onSubmit={handleSubmit}
-    >
-      {(formikProps) => (
-        <EditPlaylistNavigator
-          {...formikProps}
-          playlistId={playlist.playlist_id}
-        />
-      )}
-    </Formik>
+    <ModalScreen>
+      <Formik
+        initialValues={initialValues}
+        initialStatus={{ imageLoading: false, imageGenerating: false }}
+        onSubmit={handleSubmit}
+      >
+        {(formikProps) => (
+          <EditPlaylistNavigator
+            {...formikProps}
+            playlistId={playlist.playlist_id}
+          />
+        )}
+      </Formik>
+    </ModalScreen>
   )
 }

packages/mobile/src/screens/edit-playlist-screen/index.ts

@@ -1,3 +1,3 @@
-export * from './EditPlaylistScreen'
+export * from './EditPlaylistModalScreen'
 export * from './LegacyEditPlaylistScreen'
 export * from './CreatePlaylistScreen'

packages/mobile/src/screens/edit-track-screen/EditExistingTrackScreen.tsx → packages/mobile/src/screens/edit-track-screen/EditTrackModalScreen.tsx

@@ -8,6 +8,7 @@ import {
 } from '@audius/common'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { ModalScreen } from 'app/components/core'
 import { useTrackImage } from 'app/components/image/TrackImage'
 import { isImageUriSource } from 'app/hooks/useContentNodeImage'
 import { useNavigation } from 'app/hooks/useNavigation'
@@ -23,7 +24,7 @@ const messages = {
   save: 'Save Changes'
 }
 
-export const EditExistingTrackScreen = () => {
+export const EditTrackModalScreen = () => {
   const { params } = useRoute<'EditTrack'>()
   const { id } = params
   const dispatch = useDispatch()
@@ -56,11 +57,13 @@ export const EditExistingTrackScreen = () => {
   }
 
   return (
-    <EditTrackScreen
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-      title={messages.title}
-      doneText={messages.save}
-    />
+    <ModalScreen>
+      <EditTrackScreen
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+        title={messages.title}
+        doneText={messages.save}
+      />
+    </ModalScreen>
   )
 }

packages/mobile/src/screens/edit-track-screen/index.ts

@@ -1,2 +1,2 @@
 export * from './EditTrackScreen'
-export * from './EditExistingTrackScreen'
+export * from './EditTrackModalScreen'

packages/mobile/src/screens/tip-artist-screen/TipArtistModal.tsx → packages/mobile/src/screens/tip-artist-screen/TipArtistModalScreen.tsx

@@ -4,6 +4,8 @@ import { tippingActions } from '@audius/common'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { useDispatch } from 'react-redux'
 
+import { ModalScreen } from 'app/components/core'
+
 import { useAppScreenOptions } from '../app-screen/useAppScreenOptions'
 
 import { ConfirmSendTipScreen } from './ConfirmSendTipScreen'
@@ -15,7 +17,7 @@ const Stack = createNativeStackNavigator()
 
 const screenOptionOverrides = { headerRight: () => null }
 
-export const TipArtistModal = () => {
+export const TipArtistModalScreen = () => {
   const screenOptions = useAppScreenOptions(screenOptionOverrides)
   const dispatch = useDispatch()
 
@@ -26,10 +28,12 @@ export const TipArtistModal = () => {
   }, [dispatch])
 
   return (
-    <Stack.Navigator screenOptions={screenOptions}>
-      <Stack.Screen name='SendTip' component={SendTipScreen} />
-      <Stack.Screen name='ConfirmTip' component={ConfirmSendTipScreen} />
-      <Stack.Screen name='TipSent' component={TipSentScreen} />
-    </Stack.Navigator>
+    <ModalScreen>
+      <Stack.Navigator screenOptions={screenOptions}>
+        <Stack.Screen name='SendTip' component={SendTipScreen} />
+        <Stack.Screen name='ConfirmTip' component={ConfirmSendTipScreen} />
+        <Stack.Screen name='TipSent' component={TipSentScreen} />
+      </Stack.Navigator>
+    </ModalScreen>
   )
 }

packages/mobile/src/screens/tip-artist-screen/index.ts

@@ -1 +1 @@
-export * from './TipArtistModal'
+export * from './TipArtistModalScreen'

packages/mobile/src/screens/upload-screen/index.ts

@@ -1 +1 @@
-export { UploadScreen } from './screens'
+export { UploadModalScreen } from './screens'

packages/mobile/src/screens/upload-screen/screens/UploadModalScreen.tsx

@@ -0,0 +1,36 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+
+import { ModalScreen } from 'app/components/core'
+
+import { useAppScreenOptions } from '../../app-screen/useAppScreenOptions'
+
+import { CompleteTrackScreen } from './CompleteTrackScreen'
+import { SelectTrackScreen } from './SelectTrackScreen'
+import { UploadCompleteScreen } from './UploadCompleteScreen'
+import { UploadingTracksScreen } from './UploadingTracksScreen'
+
+const Stack = createNativeStackNavigator()
+
+const screenOptionOverrides = { headerRight: () => null }
+
+export const UploadModalScreen = () => {
+  const screenOptions = useAppScreenOptions(screenOptionOverrides)
+
+  return (
+    <ModalScreen>
+      <Stack.Navigator screenOptions={screenOptions}>
+        <Stack.Screen name='SelectTrack' component={SelectTrackScreen} />
+        <Stack.Screen
+          name='CompleteTrack'
+          component={CompleteTrackScreen}
+          options={{ headerShown: false, gestureEnabled: false }}
+        />
+        <Stack.Screen
+          name='UploadingTracks'
+          component={UploadingTracksScreen}
+        />
+        <Stack.Screen name='UploadComplete' component={UploadCompleteScreen} />
+      </Stack.Navigator>
+    </ModalScreen>
+  )
+}

packages/mobile/src/screens/upload-screen/screens/index.ts

@@ -1,4 +1,4 @@
-export * from './UploadScreen'
+export * from './UploadModalScreen'
 export * from './CompleteTrackScreen'
 export * from './UploadingTracksScreen'
 export * from './UploadCompleteScreen'

packages/mobile/src/screens/wallet-connect/WalletConnectStack.tsx → packages/mobile/src/screens/wallet-connect/WalletConnectModalScreen.tsx

@@ -1,6 +1,6 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 
-import { Toasts } from 'app/components/toasts'
+import { ModalScreen } from 'app/components/core'
 
 import { useAppScreenOptions } from '../app-screen/useAppScreenOptions'
 
@@ -11,17 +11,16 @@ const Stack = createNativeStackNavigator()
 
 const screenOptionOverrides = { headerRight: () => null }
 
-export const WalletConnectStack = () => {
+export const WalletConnectModalScreen = () => {
   const screenOptions = useAppScreenOptions(screenOptionOverrides)
 
   return (
-    <>
-      <Toasts />
+    <ModalScreen>
       <Stack.Navigator screenOptions={screenOptions}>
         <Stack.Screen name='Wallets' component={WalletConnectScreen} />
       </Stack.Navigator>
       <WalletsDrawer />
       <ConfirmRemoveWalletDrawer />
-    </>
+    </ModalScreen>
   )
 }

packages/mobile/src/screens/wallet-connect/index.ts

@@ -1,2 +1,2 @@
-export { WalletConnectStack as WalletConnectScreen } from './WalletConnectStack'
+export { WalletConnectModalScreen } from './WalletConnectModalScreen'
 export { WalletConnectProvider } from './WalletConnectProvider'