openComposer opens new mail with "null" subject on android

[FloErwerth]

hi there, thanks for this awesome library. I noticed a weird behavior and I don't really know if it is a bug or not.

TL;DR

Getting clients with getEmailClients, calling the openComposer with the iOSAppName / androidPackageName for the specific device.
When opening Outlook the function opens an draft with the subject "null". Expected was that the client opens to the inbox.

This happend on Android API 33 on an Emulator. I only verified this with Outlook.

Code:

type MailClients = Awaited<ReturnType<typeof getEmailClients>>;
type EmailProviderSheetProps = { clients: MailClients } & SheetProps;

// component to render a button that calls openComposer
const EMailClient = ({ title, androidPackageName, iOSAppName }: MailClients[number]) => {
  return (
    <Button unstyled onPress={() => openComposer({ app: isIos ? iOSAppName : androidPackageName })}>
      <View justifyContent="center" alignItems="center">
        <View alignItems="center" justifyContent="center" backgroundColor="$primaryBackground" width="$4" height="$4" borderRadius={1000}>
          <Mail color="white" />
        </View>
        <SizableText fontSize="$2" fontWeight="600">
          {title}
        </SizableText>
      </View>
    </Button>
  );
};

// bottom sheet
export const EmailProviderSheet = ({ open, ...props }: SheetProps) => {
  const { width } = useWindowDimensions();
  const [clients, setMailClients] = useState<Awaited<ReturnType<typeof getEmailClients>>>([]);
  const { t } = useTranslation();

 // upon opening getting the mail clients
  useEffect(() => {
    if (open) {
      getEmailClients()
        .then((clients) => {
          setMailClients(clients);
        })
        .catch((error) => {
          console.error(error);
        });
    } else {
      setTimeout(() => {
        setMailClients([]);
      }, 200);
    }
  }, [open]);

// creating rows of max 5 clients
  const rows = useMemo(() => {
    const clientComponentWidth = width / 5;
    const maxClientsPerRow = Math.round(width / clientComponentWidth);
    const numRows = Math.ceil(clients.length / maxClientsPerRow);

    return Array.from({ length: numRows }, (_, x) => {
      const row = Array.from({ length: maxClientsPerRow }, (_, y) => {
        const index = x * maxClientsPerRow + y;

        const client = clients[index];

        if (client === undefined) {
          return null;
        }

        return (
          <Animated.View key={client.id + index} layout={FadeIn.delay(index * 50)} entering={FadeIn.delay(index * 50)}>
            <EMailClient {...client} />
          </Animated.View>
        );
      });

      return (
        <XStack key={x + 'row'} gap="$2">
          {row}
        </XStack>
      );
    });
  }, [clients, width]);

// return the actual sheet
  return (
    <Sheet titleKey="features.login.clickOnLink.openMailApp.sheet.title" snapPointsMode="fit" open={open} {...props}>
      {rows.length === 0 ? (
        <View>
          <Spinner />
        </View>
      ) : (
        <View gap="$4">
          <SizableText>{t('features.login.clickOnLink.openMailApp.sheet.message')}</SizableText>
          <View gap="$3">{rows}</View>
        </View>
      )}
    </Sheet>
  );
};

[tschoffelen]

Hi there!

Sorry if I'm mistaken, but did you mean to call openInbox instead of openComposer? openInbox will show the email inbox, openComposer shows the 'new draft' screen in most email clients.

[FloErwerth]

Yes that is correct. Then it is my mistake, I am sorry! Is it possible to achieve the desired behavior with your library? I want to render my sheet instead of the sheet of the library. So that the design is coherent with the design of the rest
of the app.

[tschoffelen]

I noticed it's not in the documentation, but openInbox also allows you to specify a app parameter according to the source code, so you should be able to just replace openComposer with openInbox in your existing code to accomplish that.