stream-chat-react-native-core 9.10.1 → 10.0.0-rc.1

package/src/components/Chat/hooks/useConnectionLifecycle.ts

@@ -0,0 +1,122 @@
+import { useCallback, useEffect } from 'react';
+
+import { AppState } from 'react-native';
+
+import NetInfo from '@react-native-community/netinfo';
+
+import type { NetworkStatusReporter, StreamChat } from 'stream-chat';
+
+import { useAppStateListener } from '../../../hooks/useAppStateListener';
+
+/**
+ * Reports the device's network status to the client, and owns the socket's app-state lifecycle.
+ *
+ * Two jobs, both side effects — this hook returns nothing. Read status with
+ * `useNetworkConnectionState()` (the device) or `useWSConnectionState()` (our socket); both read the
+ * client's own stores, so they are correct on mount rather than only after a transition.
+ *
+ * 1. **The network reporter.** The client cannot detect device network status itself — every
+ *    platform reports it differently — so it has to be told. On React Native that means NetInfo.
+ * 2. **Background/foreground.** Close the socket when the app backgrounds and reopen it on
+ *    foreground, because push notifications are only delivered while no socket is active.
+ */
+export const useConnectionLifecycle = (client: StreamChat, closeConnectionOnBackground = true) => {
+  const clientExists = !!client;
+
+  const onBackground = useCallback(() => {
+    if (!closeConnectionOnBackground || !clientExists) {
+      return;
+    }
+
+    client.closeConnection();
+  }, [closeConnectionOnBackground, client, clientExists]);
+
+  const onForeground = useCallback(() => {
+    // If the user id is not set, we should not open the connection, as it will raise an unneeded error
+    if (!clientExists || !client.userID) {
+      return;
+    }
+
+    client.openConnection();
+  }, [client, clientExists]);
+
+  useAppStateListener(onForeground, onBackground);
+
+  // A <Chat> mounted while the app is already active (Android recreating the activity in the same JS
+  // runtime) never sees the background→active change that reopens a socket its predecessor closed.
+  useEffect(() => {
+    if (!closeConnectionOnBackground || !clientExists || !client.userID) return;
+    if (AppState.currentState === 'active' && client.wsConnection.connection?.isDisconnected) {
+      client.openConnection();
+    }
+  }, [client, clientExists, closeConnectionOnBackground]);
+
+  useEffect(() => {
+    if (!clientExists) {
+      return;
+    }
+
+    // Declarative config rather than `client.networkConnection.setStatusReporter(...)`. Both survive
+    // a configuration derivation now, but this one states the reporter as part of the client's
+    // configuration rather than as an edit applied to it, so a `client.config.get('client')` shows
+    // what is actually installed.
+    //
+    // Installing one at all is not optional on React Native. Left alone the client falls back to a
+    // reporter that mirrors its own WebSocket, which cannot report that the network came back before
+    // the socket noticed — the entire reason the network signal is worth having.
+    client.config.set({
+      client: {
+        networkConnection: {
+          statusReporter: netInfoStatusReporter,
+        },
+      },
+    });
+
+    // Deliberately no teardown. The reporter's lifetime is the CLIENT's, not this component's: the
+    // client outlives `<Chat>` (push handling, background work), and `isOnline` is supposed to stay
+    // true about the device for as long as the client exists. Tearing it down here would also leave a
+    // stale value rather than a cleared one — `setStatusReporter(null)` keeps the last known status by
+    // design — so consumers would read an authoritative-looking `isOnline` that nothing is updating
+    // any more.
+    //
+    // Re-running this is safe and cannot stack listeners: `netInfoStatusReporter` is a stable
+    // module-scope reference, so `ConfigController`'s no-op write check and the observer's own
+    // installed-reporter identity guard both short-circuit. A *different* client re-runs the effect
+    // through the dependency array and installs a fresh reporter for it.
+  }, [client, clientExists]);
+};
+
+/**
+ * Subscribes to NetInfo and reports every change to the client. What `<Chat>` installs.
+ *
+ * Exported so it can be installed **at client construction** instead, which is strictly better if
+ * you build the client yourself:
+ *
+ * ```ts
+ * new StreamChat(apiKey, {
+ *   client: { networkConnection: { statusReporter: netInfoStatusReporter } },
+ * });
+ * ```
+ *
+ * `<Chat>` can only install it from an effect, so between the client being constructed and that
+ * effect running, the client falls back to a reporter that mirrors its own WebSocket. In that window
+ * a socket-only failure — an expired token, a server close — is recorded as the *device* having no
+ * network, and the UI blames the network for it. Installing here closes the window; the fallback is
+ * never reached.
+ *
+ * Module scope, so the same reference is handed to the client on every derivation — re-installing an
+ * identical reporter is a no-op there, and rebuilding it per render would tear the native listener
+ * down and recreate it for nothing.
+ *
+ * `NetInfo.addEventListener` fires once with the current state on subscribe, which satisfies the
+ * reporter contract's "report the current status as soon as it is known" requirement — so no
+ * separate `NetInfo.fetch()` is needed.
+ */
+export const netInfoStatusReporter: NetworkStatusReporter = (onStatusChange) =>
+  NetInfo.addEventListener(({ isConnected, isInternetReachable }) => {
+    // `isInternetReachable` is the stronger signal but is `null` until NetInfo has probed, so fall
+    // back to `isConnected` until it resolves. Coerced because both are `boolean | null`.
+    onStatusChange(
+      isInternetReachable !== null ? isInternetReachable && isConnected : !!isConnected,
+    );
+  });

package/src/components/Chat/hooks/useCreateChatClient.ts

@@ -2,12 +2,35 @@ import { useEffect, useState } from 'react';
 
 import { StreamChat } from 'stream-chat';
 
-import type {
-  OwnUserResponse,
-  StreamChatOptions,
-  TokenOrProvider,
-  UserResponse,
-} from 'stream-chat';
+import type { ClientUser, DeepPartial, InstanceConfigTree, TokenOrProvider } from 'stream-chat';
+
+import { netInfoStatusReporter } from './useConnectionLifecycle';
+
+/**
+ * Names the NetInfo reporter in the client's own options, so the device's network status is reported
+ * from the moment the client exists.
+ *
+ * `<Chat>` also installs it, but only from an effect — and until something reports, the client falls
+ * back to a reporter that mirrors its own WebSocket. That fallback cannot distinguish "this device
+ * has no network" from "this socket died", so a socket-only failure in that window (an expired
+ * token, a server close, the `closeConnection()` that backgrounding uses) is recorded as the device
+ * being offline, and the UI blames the network for it. Installing here means the fallback is never
+ * reached.
+ *
+ * A `statusReporter` the caller passed themselves wins — it is spread last.
+ */
+const withNetInfoReporter = (
+  options?: DeepPartial<InstanceConfigTree>,
+): DeepPartial<InstanceConfigTree> => ({
+  ...options,
+  client: {
+    ...options?.client,
+    networkConnection: {
+      statusReporter: netInfoStatusReporter,
+      ...options?.client?.networkConnection,
+    },
+  },
+});
 
 /**
  * React hook to create, connect and return `StreamChat` client.
@@ -20,8 +43,12 @@ export const useCreateChatClient = ({
 }: {
   apiKey: string;
   tokenOrProvider: TokenOrProvider;
-  userData: OwnUserResponse | UserResponse;
-  options?: StreamChatOptions;
+  /**
+   * The user to connect, as `client.connectUser` accepts it: only `id` is required, so
+   * `{ id, name, image }` is enough. Server-owned fields (`role`, `created_at`, …) need not be set.
+   */
+  userData: ClientUser;
+  options?: DeepPartial<InstanceConfigTree>;
 }) => {
   const [chatClient, setChatClient] = useState<StreamChat | null>(null);
   const [cachedUserData, setCachedUserData] = useState(userData);
@@ -33,7 +60,7 @@ export const useCreateChatClient = ({
   const [cachedOptions] = useState(options);
 
   useEffect(() => {
-    const client = new StreamChat(apiKey, undefined, cachedOptions);
+    const client = new StreamChat(apiKey, withNetInfoReporter(cachedOptions));
     let didUserConnectInterrupt = false;
 
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -3,39 +3,11 @@ import { useMemo } from 'react';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 
 export const useCreateChatContext = ({
-  appSettings,
-  channel,
   client,
-  connectionRecovering,
-  enableOfflineSupport,
+  getAppSettings,
   isMessageAIGenerated,
-  isOnline,
-  mutedUsers,
-  setActiveChannel,
-}: ChatContextValue) => {
-  const channelId = channel?.id;
-  const clientValues = client
-    ? `${client.clientID}${Object.keys(client.activeChannels).length}${
-        Object.keys(client.listeners).length
-      }${client.mutedChannels.length}`
-    : 'Offline';
-  const mutedUsersLength = mutedUsers.length;
-
-  const chatContext: ChatContextValue = useMemo(
-    () => ({
-      appSettings,
-      channel,
-      client,
-      connectionRecovering,
-      enableOfflineSupport,
-      isMessageAIGenerated,
-      isOnline,
-      mutedUsers,
-      setActiveChannel,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [appSettings, channelId, clientValues, connectionRecovering, isOnline, mutedUsersLength],
+}: ChatContextValue) =>
+  useMemo<ChatContextValue>(
+    () => ({ client, getAppSettings, isMessageAIGenerated }),
+    [client, getAppSettings, isMessageAIGenerated],
   );
-
-  return chatContext;
-};

package/src/components/Chat/hooks/useInitializeOfflineDb.ts

@@ -31,7 +31,8 @@ export type UseInitializeOfflineDbParams = {
 };
 
 /**
- * Attaches an offline database to the client and initializes it for a user.
+ * Attaches an offline database to the client and initializes it for a user. Returns the attached
+ * database, so the caller can subscribe to its state: it is attached after the first render.
  *
  * **Raises** whatever prevented the database from opening, from render, so an error
  * boundary above the caller can decide what to do. The offline database is never
@@ -53,6 +54,7 @@ export const useInitializeOfflineDb = ({
    * retry would loop forever.
    */
   const [initializationError, setInitializationError] = useState<SqliteClientError>();
+  const [offlineDb, setOfflineDb] = useState(() => client.offlineDb);
 
   const { getEncryptionKey, maxSyncEventsLimit } = options ?? {};
 
@@ -66,6 +68,7 @@ export const useInitializeOfflineDb = ({
 
   const initialize = useCallback(async () => {
     if (!(userID && enabled)) {
+      setOfflineDb(client.offlineDb);
       return;
     }
 
@@ -93,16 +96,17 @@ export const useInitializeOfflineDb = ({
       );
     }
 
-    const { offlineDb } = client;
-    if (offlineDb) {
-      await offlineDb.init(userID);
+    const attachedOfflineDb = client.offlineDb;
+    setOfflineDb(attachedOfflineDb);
+    if (attachedOfflineDb) {
+      await attachedOfflineDb.init(userID);
       // Note: Since `init()` currently swallows errors by design, we have to rely
       // on consuming the error later in order to be able to still rethrow without
       // introducing a breaking change.
       // TODO: The DB API should be changed in the next major to always throw upwards
       //       and let integrators handle it if necessary.
       setInitializationError(
-        offlineDb instanceof OfflineDB ? offlineDb.initializationError : undefined,
+        attachedOfflineDb instanceof OfflineDB ? attachedOfflineDb.initializationError : undefined,
       );
     }
   }, [client, enabled, isEncryptionEnabled, maxSyncEventsLimit, resolveEncryptionKey, userID]);
@@ -114,4 +118,6 @@ export const useInitializeOfflineDb = ({
   if (initializationError) {
     throw initializationError;
   }
+
+  return offlineDb;
 };

package/src/components/Chat/hooks/useNetworkConnectionState.ts

@@ -0,0 +1,39 @@
+import type { NetworkConnectionState } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStateStore } from '../../../hooks/useStateStore';
+
+const identity = (state: NetworkConnectionState) => state;
+
+/**
+ * The **device's** network status, as reported by the NetInfo listener `<Chat>` registers on
+ * `client.networkConnection`.
+ *
+ * Not the same fact as {@link useWSConnectionState}: a socket dies on a working network, and a device
+ * drops while the socket has not noticed yet. Use this for "you're offline"; use the WebSocket hook
+ * for "Reconnecting…".
+ *
+ * `isOnline` has **three** states. `undefined` means *unknown* — nobody has reported yet. A guard must
+ * therefore test `isOnline === false`; `!isOnline` is also true when the answer is unknown, which
+ * would claim "offline" on the very first render and on any host where no listener is installed.
+ *
+ * Must be used under `<Chat>`.
+ */
+export const useNetworkConnectionState = () => {
+  const { client } = useChatContext();
+  return useStateStore(client?.networkConnection?.state, identity);
+};
+
+/**
+ * {@link useNetworkConnectionState} narrowed to what a component actually reads, so it re-renders only
+ * when that changes. The selector must return a flat object or tuple — it is shallow-compared on its
+ * own keys, and must be declared at module scope to stay referentially stable.
+ */
+export const useNetworkConnectionStateSelector = <
+  O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
+>(
+  selector: (state: NetworkConnectionState) => O,
+) => {
+  const { client } = useChatContext();
+  return useStateStore(client?.networkConnection?.state, selector);
+};

package/src/components/Chat/hooks/usePendingUploadsDefault.ts

@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+
+import type { StreamChat } from 'stream-chat';
+
+/**
+ * Supplies the SDK's default for `messageComposer.attachments.pendingUploadsEnabled` — whether a
+ * message can be sent while its attachments are still uploading — and nothing more.
+ *
+ * Offline support depends on the local message keeping its pending attachments, which is exactly
+ * what this switch does, so enabling `enableOfflineSupport` turns it on. With offline support off
+ * nothing is written and `stream-chat`'s own default (`false`) applies.
+ *
+ * Written only when the integrator has not registered a value. Set it on the client to take the
+ * decision yourself — ideally before handing the client to `<Chat>`, so this never writes at all:
+ *
+ * ```ts
+ * client.config.set({ messageComposer: { attachments: { pendingUploadsEnabled: false } } });
+ * ```
+ *
+ * Once written, the value is never taken back: the hook cannot tell its own write from an
+ * integrator's later write of the same value, so a later `enableOfflineSupport={false}` leaves
+ * pending uploads on rather than risk overwriting a value the integrator chose.
+ */
+export const usePendingUploadsDefault = (client: StreamChat, enableOfflineSupport: boolean) => {
+  useEffect(() => {
+    if (!client || !enableOfflineSupport) {
+      return;
+    }
+
+    const registered =
+      client.config.getConfig('messageComposer')?.attachments?.pendingUploadsEnabled;
+    if (registered !== undefined) {
+      return;
+    }
+
+    client.config.setConfig('messageComposer', {
+      attachments: { pendingUploadsEnabled: true },
+    });
+
+    // Deliberately no teardown, for the same reason as the network reporter in
+    // `useConnectionLifecycle`: the configuration lives as long as the client, which outlives `<Chat>`.
+  }, [client, enableOfflineSupport]);
+};

package/src/components/Chat/hooks/useWSConnectionState.ts

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+
+import type { NetworkConnectionState, WSConnectionConfig, WSConnectionState } from 'stream-chat';
+
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStateStore } from '../../../hooks/useStateStore';
+
+const identity = (state: WSConnectionState) => state;
+const healthSelector = (state: WSConnectionState) => ({
+  isHealthy: state.isHealthy,
+  lastHealthyAt: state.lastHealthyAt,
+});
+const displayDelaySelector = (config: WSConnectionConfig) => ({
+  offlineNotificationDisplayDelayMs: config.offlineNotificationDisplayDelayMs,
+});
+const networkSelector = (state: NetworkConnectionState) => ({ isOnline: state.isOnline });
+
+/**
+ * This client's WebSocket status.
+ *
+ * Not the same fact as {@link useNetworkConnectionState}, and the difference is the point: a socket
+ * dies on a perfectly good network (a server close, an expired token, a health-check timeout), and a
+ * device drops while the socket has not noticed yet. Use this for "Reconnecting…"; use the network
+ * hook for "you're offline".
+ *
+ * `isHealthy` is always a boolean — a socket always has a state — so `!isHealthy` is safe, unlike the
+ * network store's `isOnline`, which is `undefined` until something reports.
+ *
+ * Reads the store rather than reacting to an event, so it is correct on mount rather than only after
+ * the first transition, and so it reports the paths that were always silent
+ * (`client.closeConnection()`, the mobile backgrounding path, dispatches nothing).
+ *
+ * This is the **raw** status, and it has a trap: `isHealthy` is `false` from construction, so it
+ * reads the same before the first connect as it does after a drop. Those need opposite UI — one is
+ * "connecting", the other is "we lost it" — and only `lastHealthyAt === null` tells them apart.
+ * Anything user-visible wants {@link useSettledWSConnectionHealth}, which handles that and the flap
+ * debounce; reach for this one only when you genuinely want the unfiltered store.
+ *
+ * Must be used under `<Chat>`.
+ */
+export const useWSConnectionState = () => {
+  const { client } = useChatContext();
+  return useStateStore(client?.wsConnection?.state, identity);
+};
+
+/**
+ * {@link useWSConnectionState} narrowed to what a component actually reads, so it re-renders only
+ * when that changes. The selector must return a flat object or tuple — it is shallow-compared on its
+ * own keys, and must be declared at module scope to stay referentially stable.
+ */
+export const useWSConnectionStateSelector = <
+  O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
+>(
+  selector: (state: WSConnectionState) => O,
+) => {
+  const { client } = useChatContext();
+  return useStateStore(client?.wsConnection?.state, selector);
+};
+
+/**
+ * `isHealthy`, but a drop has to last before it is believed. What UI should render.
+ *
+ * Recovery is reported immediately and only the drop is held back, because the two are not
+ * symmetric: showing "Reconnecting…" a moment late costs nothing, leaving it up a moment too long
+ * makes a working app look broken.
+ *
+ * Most drops resolve in well under a second — a backgrounded socket, a handover between cells, a
+ * server closing an idle connection — and a banner that rendered all of them would flash constantly.
+ * The client used to hold this back itself, debouncing its offline event by a fixed five seconds;
+ * that timer outlived the socket that armed it, so it was removed in favour of the value living
+ * here, where whoever draws the banner owns it. The length is
+ * `client.config.set({ client: { wsConnection: { offlineNotificationDisplayDelayMs } } })`; zero
+ * holds nothing back.
+ *
+ * A socket that is already down when this mounts reads as down straight away — there is no flap to
+ * wait out. A socket that has never been up is a different case: that is a first connect, not a
+ * drop, so it reads as healthy until the delay says otherwise.
+ *
+ * Must be used under `<Chat>`.
+ */
+export const useSettledWSConnectionHealth = () => {
+  const { client } = useChatContext();
+  const status = useStateStore(client?.wsConnection?.state, healthSelector);
+  const isHealthy = !!status?.isHealthy;
+  const hasBeenHealthy = !!status?.lastHealthyAt;
+  // `=== false` is the device telling us it has no network, which is a different thing from
+  // `undefined`, meaning nobody has reported yet.
+  const networkIsDown =
+    useStateStore(client?.networkConnection?.state, networkSelector)?.isOnline === false;
+  const delay =
+    useStateStore(client?.wsConnection?.configState, displayDelaySelector)
+      ?.offlineNotificationDisplayDelayMs ?? 0;
+
+  const [settled, setSettled] = useState(() => isHealthy || (!hasBeenHealthy && !networkIsDown));
+
+  useEffect(() => {
+    // Up is immediate, and clearing any pending down with it: a socket that came back before the
+    // timer fired must never announce the drop it already recovered from — the exact bug that
+    // retiring the client-side timer was meant to end.
+    if (isHealthy) {
+      setSettled(true);
+      return;
+    }
+
+    if (delay <= 0 || networkIsDown) {
+      setSettled(false);
+      return;
+    }
+
+    const timeout = setTimeout(() => setSettled(false), delay);
+    return () => clearTimeout(timeout);
+  }, [isHealthy, delay, networkIsDown]);
+
+  return settled;
+};

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -176,7 +176,7 @@ describe('ImageGalleryFooter', () => {
     const shareImageMock = jest.spyOn(NativeHandlers, 'shareImage');
     const deleteFileMock = jest.spyOn(NativeHandlers, 'deleteFile');
 
-    const attachment = { ...generateImageAttachment(), mime_type: 'image/png' };
+    const attachment = { ...generateImageAttachment(), custom: { mime_type: 'image/png' } };
 
     render(<ImageGalleryComponentImage attachment={attachment} />);
 
@@ -206,8 +206,8 @@ describe('ImageGalleryFooter', () => {
 
     const attachment = {
       ...generateImageAttachment(),
+      custom: { mime_type: 'image/png' },
       image_url: 'https://my-image-service/image/123456',
-      mime_type: 'image/png',
     };
 
     render(<ImageGalleryComponentImage attachment={attachment} />);

package/src/components/ImageGallery/components/ImageGalleryA11yProbe.tsx

@@ -37,7 +37,7 @@ export const ImageGalleryA11yProbe = ({ containerBackground }: Props) => {
     [currentIndex, assetsCount],
   );
   const accessibilityValueText = useA11yLabel(
-    'a11y/{{position}} of {{count}}',
+    'imageGallery.position.accessibilityLabel',
     accessibilityValueParams,
   );
   const accessibilityValue = useMemo(

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -140,14 +140,14 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) =>
           <ShareButton savingInProgress={savingInProgress} share={share} />
           <View style={styles.centerContainer} accessibilityLabel='Center element'>
             <Text style={styles.imageCountText}>
-              {t('{{ index }} of {{ photoLength }}', {
+              {t('imageGallery.footer.position.text', '{{ index }} of {{ photoLength }}', {
                 index: currentIndex + 1,
                 photoLength: imageGalleryStateStore.assets.length,
               })}
             </Text>
           </View>
           <Button
-            accessibilityLabelKey='a11y/Grid Icon'
+            accessibilityLabelKey='imageGallery.footer.grid.accessibilityLabel'
             variant='secondary'
             type='ghost'
             size='md'
@@ -180,7 +180,7 @@ const ShareButton = ({ share, savingInProgress }: ShareButtonProps) => {
     </View>
   ) : (
     <Button
-      accessibilityLabelKey='a11y/Share Button'
+      accessibilityLabelKey='imageGallery.footer.share.accessibilityLabel'
       variant='secondary'
       type='ghost'
       size='md'

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -14,9 +14,9 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 
+import { getDateString } from '../../../i18n/utils';
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
 import { primitives } from '../../../theme';
-import { getDateString } from '../../../utils/i18n/getDateString';
 import { Button } from '../../ui/Button/Button';
 import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
 
@@ -54,10 +54,10 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
   const date = useMemo(
     () =>
       getDateString({
-        date: asset?.created_at,
+        messageCreatedAt: asset?.created_at,
         t,
         tDateTimeParser,
-        timestampTranslationKey: 'timestamp/ImageGalleryHeader',
+        timestampTranslationKey: 'timestamp.ImageGalleryHeader',
       }),
     [asset?.created_at, t, tDateTimeParser],
   );
@@ -93,7 +93,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
         <View style={styles.innerContainer}>
           <View style={styles.leftContainer}>
             <Button
-              accessibilityLabelKey='a11y/Hide Overlay'
+              accessibilityLabelKey='imageGallery.header.hideOverlay.accessibilityLabel'
               variant='secondary'
               type='ghost'
               size='md'
@@ -104,7 +104,9 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
           </View>
           <View style={styles.centerContainer} accessibilityLabel='Center element'>
             <Text style={styles.userName}>
-              {asset?.user?.name || asset?.user?.id || t('Unknown User')}
+              {asset?.user?.name ||
+                asset?.user?.id ||
+                t('common.unknownUser.label', 'Unknown User')}
             </Text>
             {date ? <Text style={styles.date}>{date}</Text> : null}
           </View>

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -93,7 +93,7 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
     <View style={[styles.container, container]}>
       <View style={styles.leftContainer}>
         <Button
-          accessibilityLabelKey='a11y/Play Pause Button'
+          accessibilityLabelKey='imageGallery.videoControl.playPause.accessibilityLabel'
           variant='secondary'
           type='ghost'
           size='md'

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -27,7 +27,7 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
         <View style={[styles.container, channelContainer]}>
           <icons.MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
           <Text style={[styles.channelTitle, channelTitle]} testID='empty-channel-state-title'>
-            {t('No conversations yet')}
+            {t('indicators.emptyState.noConversations.text', 'No conversations yet')}
           </Text>
         </View>
       );
@@ -35,20 +35,24 @@ export const EmptyStateIndicator = ({ listType }: EmptyStateProps) => {
       return (
         <View style={[styles.container, messageContainer]}>
           <icons.MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
-          <Text style={[styles.messageTitle, messageTitle]}>{t('No chats here yet…')}</Text>
+          <Text style={[styles.messageTitle, messageTitle]}>
+            {t('indicators.emptyState.noChats.text', 'No chats here yet…')}
+          </Text>
         </View>
       );
     case 'threads':
       return (
         <View style={styles.container}>
           <icons.MessageBubbleEmpty height={27} stroke={semantics.textTertiary} width={25} />
-          <Text style={styles.threadText}>{t('Reply to a message to start a thread')}</Text>
+          <Text style={styles.threadText}>
+            {t('indicators.emptyState.noThreads.text', 'Reply to a message to start a thread')}
+          </Text>
         </View>
       );
     default:
       return (
         <Text style={[{ color: semantics.textSecondary }, messageContainer]}>
-          {t('No items exist')}
+          {t('indicators.emptyState.noItems.text', 'No items exist')}
         </Text>
       );
   }