@oxy.so/services 4.0.6 → 6.0.0

package/src/ui/components/ProfileButton.tsx

@@ -1,9 +1,6 @@
 import type React from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
-import {
-    type StyleProp,
-    type ViewStyle,
-} from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { View } from 'react-native-css/components';
 import { RiLoginBoxLine } from '@oxy.so/bloom/icons/RiLoginBoxLine';
 import { RiMoreLine } from '@oxy.so/bloom/icons/RiMoreLine';

package/src/ui/components/__tests__/followButtonAccessibility.test.tsx

@@ -0,0 +1,191 @@
+/**
+ * The follow button's accessible name follows its state (OxyHQ/oxy#1375 item
+ * 22). On @nate's profile the button showed "Following" while TalkBack read
+ * "Follow": Bloom names the button by its idle label and leaves the state to
+ * the pressed flag, which TalkBack reads as "selected".
+ *
+ * The table pins what each state says; the render tests pin that both
+ * FollowButton modes and FollowTargetButton hand it to Bloom.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  describeFollowAllButton,
+  describeFollowButton,
+  formatHandle,
+} from '../followButtonAccessibility';
+
+interface BloomFollowProps {
+  following: boolean;
+  label?: string;
+  followingLabel?: string;
+  loading?: boolean;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+}
+const mockBloomProps: BloomFollowProps[] = [];
+const lastBloomProps = () => mockBloomProps[mockBloomProps.length - 1];
+
+jest.mock('@oxy.so/bloom/media-header', () => ({
+  FollowButton: (props: BloomFollowProps) => {
+    mockBloomProps.push(props);
+    return null;
+  },
+}));
+
+let mockFollowState = { isFollowing: false, isKnown: true, isLoading: false };
+let mockMulti = { allFollowing: false, isAnyLoading: false };
+jest.mock('../../hooks/useFollow', () => ({
+  useFollowForButton: () => ({
+    ...mockFollowState,
+    toggleFollow: jest.fn(),
+    resolveStatus: jest.fn(),
+  }),
+  useFollow: () => ({
+    ...mockMulti,
+    followAllUsers: jest.fn(),
+    unfollowAllUsers: jest.fn(),
+    fetchAllStatuses: jest.fn(),
+  }),
+}));
+
+jest.mock('../../context/OxyContext', () => ({
+  useOxy: () => ({ oxyServices: {}, canUsePrivateApi: true, user: { id: 'viewer' } }),
+}));
+
+let mockTarget = {
+  status: { globalState: 'not_following', applicationMode: 'inherit', relationshipId: null },
+  isFollowing: false,
+  isUnknown: false,
+  isPending: false,
+};
+jest.mock('../../hooks/useFollowTarget', () => ({
+  useFollowTarget: () => ({
+    ...mockTarget,
+    follow: jest.fn(),
+    unfollow: jest.fn(),
+    disableHere: jest.fn(),
+    enableHere: jest.fn(),
+  }),
+}));
+
+import { FollowButton } from '../FollowButton';
+import { FollowTargetButton } from '../FollowTargetButton';
+
+describe('describeFollowButton', () => {
+  const known = { isKnown: true, isPending: false, username: 'nate' };
+
+  it.each([
+    [{ ...known, isFollowing: true }, 'Following @nate', 'Unfollows @nate'],
+    [{ ...known, isFollowing: false }, 'Follow @nate', undefined],
+    [{ ...known, isFollowing: true, isPending: true }, 'Following @nate', undefined],
+    [{ ...known, isFollowing: false, isPending: true }, 'Follow @nate', undefined],
+    [{ ...known, isKnown: false, isFollowing: false }, 'Checking whether you follow @nate', undefined],
+    [{ ...known, username: undefined, isFollowing: true }, 'Following', 'Unfollows this account'],
+    [{ ...known, username: undefined, isFollowing: false }, 'Follow', undefined],
+    [{ ...known, username: undefined, isKnown: false, isFollowing: false }, 'Checking follow status', undefined],
+  ])('%o reads "%s"', (input, label, hint) => {
+    expect(describeFollowButton(input)).toEqual(
+      hint ? { accessibilityLabel: label, accessibilityHint: hint } : { accessibilityLabel: label },
+    );
+  });
+
+  it('accepts a handle with or without the @', () => {
+    expect(formatHandle('@nate')).toBe('@nate');
+    expect(formatHandle(' nate ')).toBe('@nate');
+    expect(formatHandle('')).toBeUndefined();
+    expect(formatHandle(undefined)).toBeUndefined();
+  });
+});
+
+describe('describeFollowAllButton', () => {
+  const labels = { followAllLabel: 'Follow all', followedAllLabel: 'Following' };
+
+  it('names the state and counts the accounts in the hint', () => {
+    expect(describeFollowAllButton({ ...labels, allFollowing: false, isPending: false, count: 3 })).toEqual({
+      accessibilityLabel: 'Follow all',
+      accessibilityHint: 'Follows all 3 accounts',
+    });
+    expect(describeFollowAllButton({ ...labels, allFollowing: true, isPending: false, count: 1 })).toEqual({
+      accessibilityLabel: 'Following',
+      accessibilityHint: 'Unfollows all 1 account',
+    });
+  });
+
+  it('drops the hint while the bulk write is in flight', () => {
+    expect(describeFollowAllButton({ ...labels, allFollowing: true, isPending: true, count: 3 })).toEqual({
+      accessibilityLabel: 'Following',
+    });
+  });
+});
+
+describe('FollowButton hands Bloom a name that follows the state', () => {
+  beforeEach(() => {
+    mockBloomProps.length = 0;
+  });
+
+  it('reads "Following @nate" while it shows Following', () => {
+    mockFollowState = { isFollowing: true, isKnown: true, isLoading: false };
+    render(<FollowButton userId="nate-id" username="nate" />);
+    expect(lastBloomProps()).toMatchObject({
+      following: true,
+      accessibilityLabel: 'Following @nate',
+      accessibilityHint: 'Unfollows @nate',
+    });
+  });
+
+  it('reads "Follow @nate" while it shows Follow', () => {
+    mockFollowState = { isFollowing: false, isKnown: true, isLoading: false };
+    render(<FollowButton userId="nate-id" username="nate" />);
+    expect(lastBloomProps()).toMatchObject({ following: false, accessibilityLabel: 'Follow @nate' });
+    expect(lastBloomProps()?.accessibilityHint).toBeUndefined();
+  });
+
+  it('keeps the shown state while a write is pending', () => {
+    mockFollowState = { isFollowing: true, isKnown: true, isLoading: true };
+    render(<FollowButton userId="nate-id" username="nate" />);
+    expect(lastBloomProps()).toMatchObject({ loading: true, accessibilityLabel: 'Following @nate' });
+    expect(lastBloomProps()?.accessibilityHint).toBeUndefined();
+  });
+
+  it('says it is checking while the status is unknown', () => {
+    mockFollowState = { isFollowing: false, isKnown: false, isLoading: false };
+    render(<FollowButton userId="nate-id" username="nate" />);
+    expect(lastBloomProps()).toMatchObject({
+      loading: true,
+      accessibilityLabel: 'Checking whether you follow @nate',
+    });
+  });
+
+  it('names the "Follow all" button by its state too', () => {
+    mockMulti = { allFollowing: true, isAnyLoading: false };
+    render(<FollowButton userIds={['a', 'b']} />);
+    expect(lastBloomProps()).toMatchObject({
+      following: true,
+      accessibilityLabel: 'Following',
+      accessibilityHint: 'Unfollows all 2 accounts',
+    });
+  });
+});
+
+describe('FollowTargetButton names the state it shows', () => {
+  beforeEach(() => {
+    mockBloomProps.length = 0;
+  });
+
+  it.each([
+    ['following', { globalState: 'following', applicationMode: 'inherit' }, true, 'Following'],
+    ['requested', { globalState: 'requested', applicationMode: 'inherit' }, true, 'Requested'],
+    ['off here', { globalState: 'following', applicationMode: 'disabled' }, true, 'Off here'],
+    ['not following', { globalState: 'not_following', applicationMode: 'inherit' }, false, 'Follow'],
+  ])('%s', (_name, status, isFollowing, label) => {
+    mockTarget = {
+      status: { ...status, relationshipId: null },
+      isFollowing,
+      isUnknown: false,
+      isPending: false,
+    };
+    render(<FollowTargetButton targetId="t1" showOptions={false} />);
+    expect(lastBloomProps()?.accessibilityLabel).toBe(label);
+  });
+});

package/src/ui/components/authChooser/AccountsMenuView.tsx

@@ -51,7 +51,6 @@ import {
   type SwitcherPrincipalRow,
 } from '@oxy.so/core';
 import AvatarCameraBadge from '../AvatarCameraBadge';
-import { HoverPressable } from './primitives';
 import { authChooserStyles as styles } from './styles';
 import {
   resolveAccentHex,
@@ -63,6 +62,34 @@ import {
   type Translate,
 } from './types';
 
+type HoverPressableProps = Omit<React.ComponentProps<typeof Pressable>, 'className'> & {
+  baseClassName: string;
+  hoverClassName: string;
+};
+
+/**
+ * A `Pressable` that appends a hover-tint NativeWind token while pointer-hovered.
+ * The Metro web pipeline here does NOT emit NativeWind `hover:` variants, so hover
+ * is driven by RN's cross-platform `onHoverIn`/`onHoverOut` (they fire only on web
+ * via react-native-web; a no-op on native) toggling a plain background token —
+ * the tint stays a NativeWind class, only the trigger is JS.
+ */
+const HoverPressable: React.FC<HoverPressableProps> = ({
+  baseClassName,
+  hoverClassName,
+  ...rest
+}) => {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <Pressable
+      {...rest}
+      className={hovered ? `${baseClassName} ${hoverClassName}` : baseClassName}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+    />
+  );
+};
+
 /**
  * Leading glyph for the rows that live in a Bloom grouped section (the MENU
  * block) and for the storage card's cloud, which lines its title up with them.

package/src/ui/components/authChooser/primitives.tsx

@@ -5,8 +5,7 @@
  */
 
 import type React from 'react';
-import { useState } from 'react';
-import { Pressable, View } from 'react-native-css/components';
+import { Pressable, View } from 'react-native';
 import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
 import { Avatar } from '@oxy.so/bloom/avatar';
 import { BloomColorScope } from '@oxy.so/bloom/theme';
@@ -18,34 +17,6 @@ import { resolveAccentHex, toPreset, type Theme } from './types';
 /** Diameter of a row avatar (the sign-in view's account rows). */
 const ROW_AVATAR_SIZE = 40;
 
-type HoverPressableProps = Omit<React.ComponentProps<typeof Pressable>, 'className'> & {
-  baseClassName: string;
-  hoverClassName: string;
-};
-
-/**
- * A `Pressable` that appends a hover-tint NativeWind token while pointer-hovered.
- * The Metro web pipeline here does NOT emit NativeWind `hover:` variants, so hover
- * is driven by RN's cross-platform `onHoverIn`/`onHoverOut` (they fire only on web
- * via react-native-web; a no-op on native) toggling a plain background token —
- * the tint stays a NativeWind class, only the trigger is JS.
- */
-export const HoverPressable: React.FC<HoverPressableProps> = ({
-  baseClassName,
-  hoverClassName,
-  ...rest
-}) => {
-  const [hovered, setHovered] = useState(false);
-  return (
-    <Pressable
-      {...rest}
-      className={hovered ? `${baseClassName} ${hoverClassName}` : baseClassName}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
-    />
-  );
-};
-
 /**
  * A SUBORDINATE action: a small centred text link, never a button.
  *
@@ -73,15 +44,6 @@ export const SubtleLink: React.FC<{
   </Pressable>
 );
 
-/** A labelled hairline separating two blocks ("or"). */
-export const Dividerish: React.FC<{ theme: Theme; label: string }> = ({ theme, label }) => (
-  <View style={styles.dividerRow}>
-    <View style={[styles.dividerLine, { backgroundColor: theme.colors.border }]} />
-    <Text style={[styles.dividerText, { color: theme.colors.textSecondary }]}>{label}</Text>
-    <View style={[styles.dividerLine, { backgroundColor: theme.colors.border }]} />
-  </View>
-);
-
 /**
  * A `principal acting as account` row on the sign-in entry — "continue as one of
  * these" rather than a choice of authentication METHOD, which is why it stays

package/src/ui/components/authChooser/signInFailureMessage.ts

@@ -9,18 +9,12 @@
 import type { SignInFailureReason } from '@oxy.so/core';
 import type { Translate } from './types';
 
-/**
- * The toast for `failure`, or `null` when there is nothing to report: a
- * `'cancelled'` attempt is the user's own choice (they closed the window), and
- * the surface already offers "Try again" without scolding them for it.
- */
+/** The toast for `failure`, or `null` when there is nothing to report. */
 export function signInFailureMessage(
   failure: SignInFailureReason | null,
   t: Translate,
 ): string | null {
   switch (failure) {
-    case 'cancelled':
-      return null;
     case 'denied':
       return t('accountSwitcher.signInFailures.denied');
     case 'expired':

package/src/ui/components/authChooser/styles.ts

@@ -140,42 +140,11 @@ export const authChooserStyles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '600',
   },
-  signInBlock: {
-    width: '100%',
-  },
   primaryButton: {
     width: '100%',
     borderRadius: 14,
     marginTop: 8,
   },
-  secondaryButton: {
-    width: '100%',
-    borderRadius: 14,
-    marginTop: 10,
-  },
-  usernameInput: {
-    width: '100%',
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 14,
-    paddingVertical: 12,
-    paddingHorizontal: 14,
-    fontSize: 16,
-    marginTop: 8,
-  },
-  dividerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-    marginVertical: 14,
-  },
-  dividerLine: {
-    flex: 1,
-    height: StyleSheet.hairlineWidth,
-  },
-  dividerText: {
-    marginHorizontal: 12,
-    fontSize: 13,
-  },
   centeredBlock: {
     alignItems: 'center',
     justifyContent: 'center',

package/src/ui/components/authChooser/types.ts

@@ -96,7 +96,7 @@ export interface AccountsMenuActions {
   onTerms: () => void;
   onSignOut: () => void;
   /**
-   * Open the person's identity at the identity origin (recovery phrase,
+   * Open the person's identity at auth.oxy.so/identity (recovery phrase,
    * recovery, account deletion). Web only — `undefined` hides the row.
    */
   onOpenIdentity?: () => void;
@@ -111,8 +111,8 @@ export interface AccountsMenuActions {
 /**
  * Where a passkey sign-in or sign-up can run from the current surface.
  *
- * `'hub'`  = web: it runs at the identity origin (`id.oxy.so`) in a popup, on
- *            every web origin, first-party or not.
+ * `'hub'`  = web: it runs in auth.oxy.so's window over the app
+ *            (`continueOnAuth`), on every web origin.
  * `'none'` = native, where Commons owns identity.
  */
 export type PasskeyMode = 'hub' | 'none';

package/src/ui/components/followButtonAccessibility.ts

@@ -0,0 +1,83 @@
+/**
+ * What a screen reader hears for a follow button.
+ *
+ * Bloom's `FollowButton` names itself "Follow" in both states and carries the
+ * state in its pressed flag. Android TalkBack reads that flag as "selected",
+ * so a button that SHOWS "Following" was announced as "Follow, selected", and a
+ * TalkBack user could not tell they already follow the account
+ * (OxyHQ/oxy#1375 item 22). The name now says the state, and who it is for
+ * when the caller knows the handle.
+ *
+ * Pure, and kept apart from the components, so every state is pinned by a
+ * table test rather than by a render that can only see one state at a time.
+ */
+
+export interface FollowButtonAccessibility {
+  accessibilityLabel: string;
+  accessibilityHint?: string;
+}
+
+/** `@nate` from `nate` or `@nate`; `undefined` when there is no handle. */
+export function formatHandle(username: string | undefined): string | undefined {
+  const bare = username?.trim().replace(/^@+/, '');
+  return bare ? `@${bare}` : undefined;
+}
+
+/**
+ * The single-user button.
+ *
+ * - `isKnown: false`: the status is still being fetched and the button is
+ *   inert, so it says so rather than offering a "Follow" it would ignore.
+ * - `isPending`: a follow or unfollow is in flight. The name keeps the state
+ *   the button still shows; the busy flag says the rest, and there is no hint
+ *   because a press does nothing until the write settles.
+ * - Following: "Following @nate", hinted "Unfollows @nate", because pressing
+ *   it unfollows, which the visible "Following" does not say.
+ */
+export function describeFollowButton(input: {
+  isKnown: boolean;
+  isFollowing: boolean;
+  isPending: boolean;
+  username?: string;
+}): FollowButtonAccessibility {
+  const handle = formatHandle(input.username);
+
+  if (!input.isKnown) {
+    return {
+      accessibilityLabel: handle
+        ? `Checking whether you follow ${handle}`
+        : 'Checking follow status',
+    };
+  }
+
+  const accessibilityLabel = input.isFollowing
+    ? handle ? `Following ${handle}` : 'Following'
+    : handle ? `Follow ${handle}` : 'Follow';
+
+  if (input.isPending || !input.isFollowing) return { accessibilityLabel };
+
+  return {
+    accessibilityLabel,
+    accessibilityHint: handle ? `Unfollows ${handle}` : 'Unfollows this account',
+  };
+}
+
+/**
+ * The "Follow all" button. The labels are the caller's, since a starter pack
+ * and a feed's member list word it differently; the hint carries the count.
+ */
+export function describeFollowAllButton(input: {
+  allFollowing: boolean;
+  isPending: boolean;
+  count: number;
+  followAllLabel: string;
+  followedAllLabel: string;
+}): FollowButtonAccessibility {
+  const accessibilityLabel = input.allFollowing ? input.followedAllLabel : input.followAllLabel;
+  if (input.isPending) return { accessibilityLabel };
+  const accounts = input.count === 1 ? '1 account' : `${input.count} accounts`;
+  return {
+    accessibilityLabel,
+    accessibilityHint: input.allFollowing ? `Unfollows all ${accounts}` : `Follows all ${accounts}`,
+  };
+}

package/src/ui/components/oauthNavigation.ts

@@ -52,7 +52,7 @@ export interface OpenAuthorizeOptions {
  * (see `normalizeOAuthRedirectUri`), so the IdP always returns the tab to `/`,
  * and the return handlers restore this path. Doing it here rather than at each
  * call site is deliberate: every web authorize redirect — silent restore,
- * interactive sign-in, the passkey hub — funnels through this function, so a
+ * interactive sign-in, `continueOnAuth` — funnels through this function, so a
  * new flow cannot forget to preserve the page the visitor came from.
  */
 export function redirectToAuthorize(url: string): void {

package/src/ui/components/signIn/InlineCommonsQr.tsx

@@ -0,0 +1,135 @@
+/**
+ * The sign-in entry's embedded QR, over the split card's photo carousel: scan
+ * it with Commons on a phone and this screen is signed in.
+ *
+ * It owns one QR-only request (`controller.startInlineQr()`): started the
+ * first time the block is actually laid out on screen — never while its column
+ * is hidden below `md` — renewed when it expires, and withdrawn when the block
+ * goes away while it is still approvable. It never pushes to a phone or opens Commons —
+ * the person did not ask for either by opening the screen. Any other sign-in
+ * they choose supersedes it like any new attempt.
+ *
+ * Anti-phishing: the plate encodes `signIn.qrPayload` and renders nothing
+ * derived from it; the approver resolves the app server-side.
+ */
+
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import { Button } from '@oxy.so/bloom/button';
+import { RiCheckboxCircleLine } from '@oxy.so/bloom/icons/RiCheckboxCircleLine';
+import { RiRefreshLine } from '@oxy.so/bloom/icons/RiRefreshLine';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import type { AccountDialogController } from '@oxy.so/core';
+import { useI18n } from '../../hooks/useI18n';
+import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
+
+/** High-contrast, un-themed on purpose: scan reliability. */
+const QR_PLATE_BG = '#FFFFFF';
+const QR_FOREGROUND = '#000000';
+const QR_SIZE = 112;
+const PLATE_PADDING = 8;
+const PLATE_SIZE = QR_SIZE + PLATE_PADDING * 2;
+
+export const InlineCommonsQr: React.FC<{ controller: AccountDialogController | null }> = ({ controller }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { signIn } = useAccountDialogSnapshot(controller);
+  const live = signIn.inline && (signIn.phase === 'starting' || signIn.phase === 'waiting');
+  const expired = signIn.inline && signIn.phase === 'error' && signIn.failure === 'expired';
+
+  // Laid out with a size only where its column shows (`display: none` below
+  // `md` lays out empty), so that is when a request is worth having.
+  const [shown, setShown] = useState(false);
+
+  // One request for as long as the block is on screen. Withdrawn on the way
+  // out only while it is still ours and still approvable: an attempt the
+  // person started meanwhile (a passkey window, "Continue with Oxy") is theirs.
+  useEffect(() => {
+    if (!controller || !shown) return;
+    const { signIn: current } = controller.getSnapshot();
+    if (!(current.inline && (current.phase === 'starting' || current.phase === 'waiting'))) {
+      void controller.startInlineQr();
+    }
+    return () => {
+      const { signIn: last } = controller.getSnapshot();
+      if (last.inline && (last.phase === 'starting' || last.phase === 'waiting')) controller.cancelSignIn();
+    };
+  }, [controller, shown]);
+
+  // A code only lives a few minutes; an expired one is replaced, not reported.
+  useEffect(() => {
+    if (controller && expired) void controller.startInlineQr();
+  }, [controller, expired]);
+
+  let plate: React.ReactNode;
+  if (signIn.inline && signIn.progress === 'identity-confirmed') {
+    plate = <RiCheckboxCircleLine size="3xl" fill={theme.colors.success} />;
+  } else if (live && signIn.qrPayload && signIn.progress !== 'confirming-identity') {
+    plate = <QRCode value={signIn.qrPayload} size={QR_SIZE} backgroundColor={QR_PLATE_BG} color={QR_FOREGROUND} />;
+  } else if (live || expired || (signIn.inline && signIn.phase === 'completed')) {
+    plate = <ActivityIndicator size="large" color={QR_FOREGROUND} />;
+  } else {
+    // Failed for a reason renewing will not fix by itself, or superseded and
+    // then withdrawn: one press for a new code.
+    plate = (
+      <Button
+        appearance="plain"
+        tone="neutral"
+        size="sm"
+        iconOnly
+        leadingIcon={RiRefreshLine}
+        accessibilityLabel={t('signin.qr.renew')}
+        onPress={() => void controller?.startInlineQr()}
+        testID="inline-qr-renew"
+      />
+    );
+  }
+
+  return (
+    <View
+      style={styles.block}
+      testID="inline-commons-qr"
+      onLayout={(event) => {
+        if (event.nativeEvent.layout.width > 0) setShown(true);
+      }}
+    >
+      <View style={[styles.plate, { borderColor: theme.colors.border }]}>{plate}</View>
+      <Text style={[styles.caption, styles.captionOnMedia]}>
+        {t('signin.qr.caption')}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  block: {
+    width: PLATE_SIZE,
+    alignItems: 'center',
+    gap: 6,
+  },
+  plate: {
+    width: PLATE_SIZE,
+    height: PLATE_SIZE,
+    padding: PLATE_PADDING,
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    backgroundColor: QR_PLATE_BG,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    textAlign: 'center',
+  },
+  captionOnMedia: {
+    color: '#FFFFFF',
+    fontWeight: '500',
+    textShadowColor: 'rgba(0, 0, 0, 0.6)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 4,
+  },
+});