Fix Maestro E2E regressions on iOS and Android (#11258)

src/components/Dialog/index.tsx

@@ -197,24 +197,8 @@ export function Outer({
 /**
  * @deprecated use `Dialog.ScrollableInner` instead
  */
-export function Inner({children, style, header}: DialogInnerProps) {
-  const insets = useSafeAreaInsets()
-  return (
-    <>
-      {header}
-      <View
-        style={[
-          a.pt_2xl,
-          a.px_xl,
-          IS_LIQUID_GLASS
-            ? a.pb_2xl
-            : {paddingBottom: insets.bottom + insets.top},
-          style,
-        ]}>
-        {children}
-      </View>
-    </>
-  )
+export function Inner(props: DialogInnerProps) {
+  return <ScrollableInner {...props} />
 }
 
 export const ScrollableInner = forwardRef<ScrollView, DialogInnerProps>(

src/components/Dialog/index.web.tsx

@@ -165,6 +165,9 @@ export function Outer({
   )
 }
 
+/**
+ * @deprecated use `Dialog.ScrollableInner` instead
+ */
 export function Inner({
   children,
   style,

src/screens/Onboarding/StepProfile/AvatarCircle.tsx

@@ -1,8 +1,7 @@
 import {useMemo} from 'react'
 import {View} from 'react-native'
 import {Image as ExpoImage} from 'expo-image'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
 import {AvatarCreatorCircle} from '#/screens/Onboarding/StepProfile/AvatarCreatorCircle'
 import {useAvatar} from '#/screens/Onboarding/StepProfile/index'
@@ -18,7 +17,7 @@ export function AvatarCircle({
   openLibrary: () => unknown
   openCreator: () => unknown
 }) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const t = useTheme()
   const {avatar} = useAvatar()
 
@@ -63,7 +62,7 @@ export function AvatarCircle({
       )}
       <View style={[a.absolute, {bottom: 2, right: 2}]}>
         <Button
-          label={_(msg`Select an avatar`)}
+          label={l`Select an avatar`}
           size="large"
           shape="round"
           variant="solid"

src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx

@@ -1,7 +1,6 @@
 import {useCallback} from 'react'
 import {View} from 'react-native'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 import {Trans} from '@lingui/react/macro'
 
 import {type Avatar} from '#/screens/Onboarding/StepProfile/index'
@@ -35,7 +34,7 @@ export function AvatarCreatorItems({
   avatar: Avatar
   setAvatar: React.Dispatch<React.SetStateAction<Avatar>>
 }) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const t = useTheme()
   const isEmojis = type === 'emojis'
 
@@ -68,7 +67,6 @@ export function AvatarCreatorItems({
           <Trans>Select a color</Trans>
         )}
       </Text>
-
       <View
         style={[
           a.flex_row,
@@ -81,7 +79,7 @@ export function AvatarCreatorItems({
           ? emojiNames.map(emojiName => (
               <Button
                 key={emojiName}
-                label={_(msg`Select the ${emojiName} emoji as your avatar`)}
+                label={l`Select the ${emojiName} emoji as your avatar`}
                 size="small"
                 shape="round"
                 variant="solid"
@@ -105,7 +103,7 @@ export function AvatarCreatorItems({
           : avatarColors.map(color => (
               <Button
                 key={color}
-                label={_(msg`Choose this color as your avatar`)}
+                label={l`Choose this color as your avatar`}
                 size="small"
                 shape="round"
                 variant="solid"

src/screens/Onboarding/StepProfile/index.tsx

@@ -15,8 +15,7 @@ import {
   launchImageLibraryAsync,
   UIImagePickerPreferredAssetRepresentationMode,
 } from 'expo-image-picker'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 import {Trans} from '@lingui/react/macro'
 
 import {IMAGE_SIZE_CONFIG_2K_1MB} from '#/lib/constants'
@@ -78,7 +77,7 @@ const randomColor =
 
 export function StepProfile() {
   const ax = useAnalytics()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
@@ -138,14 +137,12 @@ export function StepProfile() {
         ]
       } catch {
         setError(
-          _(
-            msg`This image could not be used. Try a different format like .jpg or .png.`,
-          ),
+          l`This image could not be used. Try a different format like .jpg or .png.`,
         )
         return []
       }
     },
-    [_, setError, sheetWrapper],
+    [l, setError, sheetWrapper],
   )
 
   const onContinue = useCallback(async () => {
@@ -298,7 +295,7 @@ export function StepProfile() {
               testID="onboardingContinue"
               color="primary"
               size="large"
-              label={_(msg`Continue to next step`)}
+              label={l`Continue to next step`}
               onPress={onContinue}>
               <ButtonText>
                 <Trans>Continue</Trans>
@@ -308,7 +305,7 @@ export function StepProfile() {
               testID="onboardingAvatarCreator"
               color="primary_subtle"
               size="large"
-              label={_(msg`Open avatar creator`)}
+              label={l`Open avatar creator`}
               onPress={onSecondaryPress}>
               <ButtonText>
                 {avatar.useCreatedAvatar ? (
@@ -321,10 +318,12 @@ export function StepProfile() {
           </View>
         </OnboardingControls.Portal>
       </View>
-
-      <Dialog.Outer control={creatorControl}>
-        <Dialog.Inner
-          label="Avatar creator"
+      <Dialog.Outer
+        control={creatorControl}
+        nativeOptions={{preventExpansion: true}}>
+        <Dialog.Handle />
+        <Dialog.ScrollableInner
+          label={l`Avatar creator`}
           style={[
             {
               width: 'auto',
@@ -351,16 +350,15 @@ export function StepProfile() {
             <Button
               color="primary"
               size="large"
-              label={_(msg`Done`)}
+              label={l`Done`}
               onPress={onDoneCreating}>
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
             </Button>
           </View>
-        </Dialog.Inner>
+        </Dialog.ScrollableInner>
       </Dialog.Outer>
-
       <PlaceholderCanvas ref={canvasRef} />
     </AvatarContext.Provider>
   )

src/view/com/composer/Composer.tsx

@@ -713,6 +713,11 @@ export const ComposePost = ({
   const [publishOnUpload, setPublishOnUpload] = useState(false)
 
   const onClose = useCallback(() => {
+    // HACKFIX: Android keyboard doesn't consistently dismiss IME
+    // TODO: investigate the root cause and fix properly -sfn
+    if (IS_ANDROID) {
+      Keyboard.dismiss()
+    }
     closeComposer()
     clearThumbnailCache(queryClient)
     revokeAllMediaUrls()