stream-chat-react-native-core 9.1.3 → 9.2.0-beta.2

package/src/a11y/hooks/useReducedMotionPreference.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
+
+/**
+ * Subscribes to AccessibilityInfo reduce-motion changes and returns the live state.
+ * Returns false when the AccessibilityContext is disabled.
+ */
+export const useReducedMotionPreference = (): boolean => {
+  const { enabled } = useAccessibilityContext();
+  const [reduceMotion, setReduceMotion] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setReduceMotion(false);
+      return;
+    }
+
+    let cancelled = false;
+    AccessibilityInfo.isReduceMotionEnabled?.()
+      .then((value) => {
+        if (!cancelled) setReduceMotion(value);
+      })
+      .catch(() => {
+        // Older RN or platforms without the API.
+      });
+
+    const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);
+
+    return () => {
+      cancelled = true;
+      subscription?.remove?.();
+    };
+  }, [enabled]);
+
+  return enabled && reduceMotion;
+};

package/src/a11y/hooks/useResolvedModalAccessibilityProps.ts

@@ -0,0 +1,30 @@
+import { Platform } from 'react-native';
+
+import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
+
+export type ResolvedModalAccessibilityProps = {
+  accessibilityViewIsModal?: boolean;
+  importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
+  accessibilityRole?: 'none' | 'button' | 'image' | 'text' | 'alert' | 'menu' | 'menuitem';
+};
+
+/**
+ * Returns the platform-appropriate set of a11y props for a modal/sheet root.
+ * Equivalent of stream-chat-react's `useResolvedModalAriaProps` — but aware of
+ * RN's iOS-vs-Android split:
+ *   - iOS uses `accessibilityViewIsModal` to trap focus.
+ *   - Android uses `importantForAccessibility="yes"` on the modal root and
+ *     `"no-hide-descendants"` on background siblings (caller's responsibility).
+ *
+ * Returns an empty object when AccessibilityContext is disabled, so the modal
+ * stays a no-op for integrators that haven't opted in.
+ */
+export const useResolvedModalAccessibilityProps = (): ResolvedModalAccessibilityProps => {
+  const { enabled } = useAccessibilityContext();
+  if (!enabled) return {};
+
+  if (Platform.OS === 'ios') {
+    return { accessibilityViewIsModal: true };
+  }
+  return { importantForAccessibility: 'yes' };
+};

package/src/a11y/hooks/useScreenReaderEnabled.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
+
+/**
+ * Subscribes to AccessibilityInfo screen-reader changes and returns the live state.
+ * Returns false when the AccessibilityContext is disabled, regardless of the OS state,
+ * so consumers don't pay the listener cost when the SDK's a11y is opted out.
+ *
+ * `forceScreenReaderMode: true` in the config short-circuits to true (used in tests
+ * and for integrator preview).
+ */
+export const useScreenReaderEnabled = (): boolean => {
+  const { enabled, forceScreenReaderMode } = useAccessibilityContext();
+  const [isEnabled, setIsEnabled] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setIsEnabled(false);
+      return;
+    }
+
+    let cancelled = false;
+    AccessibilityInfo.isScreenReaderEnabled()
+      .then((value) => {
+        if (!cancelled) setIsEnabled(value);
+      })
+      .catch(() => {
+        // Some platforms / environments may not implement this; fall back to false.
+      });
+
+    const subscription = AccessibilityInfo.addEventListener('screenReaderChanged', setIsEnabled);
+
+    return () => {
+      cancelled = true;
+      subscription?.remove?.();
+    };
+  }, [enabled]);
+
+  if (!enabled) return false;
+  if (forceScreenReaderMode) return true;
+  return isEnabled;
+};

package/src/a11y/index.ts

@@ -0,0 +1,7 @@
+export * from './a11yUtils';
+export * from './hooks/useScreenReaderEnabled';
+export * from './hooks/useReducedMotionPreference';
+export * from './hooks/useResolvedModalAccessibilityProps';
+export * from './hooks/useAnnounceOnStateChange';
+export * from './hooks/useA11yLabel';
+export * from './hooks/useAccessibilityActivateAction';

package/src/components/AITypingIndicatorView/AITypingIndicatorView.tsx

@@ -6,7 +6,13 @@ import { Channel } from 'stream-chat';
 
 import { AIStates, useAIState } from './hooks/useAIState';
 
-import { useChannelContext, useTheme, useTranslationContext } from '../../contexts';
+import { useAnnounceOnStateChange } from '../../a11y/hooks/useAnnounceOnStateChange';
+import {
+  useAccessibilityContext,
+  useChannelContext,
+  useTheme,
+  useTranslationContext,
+} from '../../contexts';
 import { primitives } from '../../theme';
 
 export type AITypingIndicatorViewProps = {
@@ -20,15 +26,24 @@ export const AITypingIndicatorView = ({
   const { channel: channelFromContext } = useChannelContext();
   const channel = channelFromProps || channelFromContext;
   const { aiState } = useAIState(channel);
+  const { announceTypingIndicator, enabled } = useAccessibilityContext();
   const allowedStates = {
     [AIStates.Thinking]: t('Thinking...'),
     [AIStates.Generating]: t('Generating...'),
   };
 
   const styles = useStyles();
+  const announceableState = aiState in allowedStates ? allowedStates[aiState] : null;
+  const shouldAnnounceTypingIndicator = enabled && announceTypingIndicator;
+  const typingAnnouncement = announceTypingIndicator ? announceableState : null;
+  useAnnounceOnStateChange(typingAnnouncement);
 
   return aiState in allowedStates ? (
-    <View style={styles.container}>
+    <View
+      accessibilityLiveRegion={shouldAnnounceTypingIndicator ? 'polite' : undefined}
+      accessibilityRole='text'
+      style={styles.container}
+    >
       <Text style={styles.text}>{allowedStates[aiState]}</Text>
     </View>
   ) : null;

package/src/components/AITypingIndicatorView/__tests__/AITypingIndicatorView.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { useAnnounceOnStateChange } from '../../../a11y/hooks/useAnnounceOnStateChange';
+import { AccessibilityProvider } from '../../../contexts/accessibilityContext/AccessibilityContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { AITypingIndicatorView } from '../AITypingIndicatorView';
+import { AIStates, useAIState } from '../hooks/useAIState';
+
+jest.mock('../../../a11y/hooks/useAnnounceOnStateChange', () => ({
+  useAnnounceOnStateChange: jest.fn(),
+}));
+
+jest.mock('../hooks/useAIState', () => {
+  const actual = jest.requireActual('../hooks/useAIState');
+  return {
+    ...actual,
+    useAIState: jest.fn(),
+  };
+});
+
+const mockUseAIState = useAIState as jest.MockedFunction<typeof useAIState>;
+const mockUseAnnounceOnStateChange = useAnnounceOnStateChange as jest.MockedFunction<
+  typeof useAnnounceOnStateChange
+>;
+
+const renderComponent = (
+  accessibility?: React.ComponentProps<typeof AccessibilityProvider>['value'],
+) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <AccessibilityProvider value={accessibility}>
+        <AITypingIndicatorView channel={{} as Channel} />
+      </AccessibilityProvider>
+    </ThemeProvider>,
+  );
+
+describe('AITypingIndicatorView', () => {
+  beforeEach(() => {
+    mockUseAIState.mockReturnValue({ aiState: AIStates.Thinking });
+    jest.clearAllMocks();
+  });
+
+  it('does not announce typing state by default', () => {
+    const { UNSAFE_queryByProps } = renderComponent();
+
+    expect(mockUseAnnounceOnStateChange).toHaveBeenCalledWith(null);
+    expect(UNSAFE_queryByProps({ accessibilityLiveRegion: 'polite' })).toBeNull();
+  });
+
+  it('does not announce typing state when a11y is enabled but typing announcements are off', () => {
+    const { UNSAFE_queryByProps } = renderComponent({
+      announceTypingIndicator: false,
+      enabled: true,
+    });
+
+    expect(mockUseAnnounceOnStateChange).toHaveBeenCalledWith(null);
+    expect(UNSAFE_queryByProps({ accessibilityLiveRegion: 'polite' })).toBeNull();
+  });
+
+  it('announces typing state when the typing announcement toggle is enabled', () => {
+    const { UNSAFE_queryByProps } = renderComponent({
+      announceTypingIndicator: true,
+      enabled: true,
+    });
+
+    expect(mockUseAnnounceOnStateChange).toHaveBeenCalledWith('Thinking...');
+    expect(UNSAFE_queryByProps({ accessibilityLiveRegion: 'polite' })).toBeTruthy();
+  });
+});

package/src/components/Accessibility/NotificationAnnouncer.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react';
+
+import { useAccessibilityAnnouncer } from './useAccessibilityAnnouncer';
+
+import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+/**
+ * Mirrors stream-chat-react's `<NotificationAnnouncer />`. RN does not yet have a
+ * unified Notification queue, so this component currently announces only
+ * connection-state transitions (offline → online and back) gated on
+ * `accessibility.announceConnectionState`. Per-channel error announcements can
+ * be wired in by a future PR via `useChannelContext().error`.
+ *
+ * Renders nothing. Mount once inside `<Channel>` (or wherever the active chat
+ * surface lives).
+ */
+export const NotificationAnnouncer = () => {
+  const { announceConnectionState, enabled } = useAccessibilityContext();
+  const { connectionRecovering, isOnline } = useChatContext();
+  const announce = useAccessibilityAnnouncer();
+  const { t } = useTranslationContext();
+  const previousIsOnlineRef = useRef<boolean | null | undefined>(undefined);
+
+  useEffect(() => {
+    if (!enabled || !announceConnectionState) return;
+    if (previousIsOnlineRef.current === undefined) {
+      previousIsOnlineRef.current = isOnline;
+      return;
+    }
+    if (previousIsOnlineRef.current === isOnline) return;
+    previousIsOnlineRef.current = isOnline;
+
+    if (isOnline) {
+      announce(t('a11y/Connected'), 'polite');
+    } else {
+      announce(connectionRecovering ? t('a11y/Reconnecting') : t('a11y/Offline'), 'assertive');
+    }
+  }, [announce, announceConnectionState, connectionRecovering, enabled, isOnline, t]);
+
+  return null;
+};

package/src/components/Accessibility/__tests__/AccessibilityAnnouncer.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+import { renderHook, waitFor } from '@testing-library/react-native';
+
+import { AccessibilityProvider } from '../../../contexts/accessibilityContext/AccessibilityContext';
+import { useAccessibilityAnnouncer } from '../useAccessibilityAnnouncer';
+
+jest.mock('react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo', () => ({
+  __esModule: true,
+  default: {
+    announceForAccessibility: jest.fn(),
+    addEventListener: jest.fn().mockReturnValue({ remove: jest.fn() }),
+    isScreenReaderEnabled: jest.fn().mockResolvedValue(false),
+    isReduceMotionEnabled: jest.fn().mockResolvedValue(false),
+  },
+}));
+
+const wrapper =
+  (enabled: boolean) =>
+  ({ children }: { children: React.ReactNode }) => (
+    <AccessibilityProvider value={{ enabled }}>{children}</AccessibilityProvider>
+  );
+
+describe('AccessibilityProvider announcer', () => {
+  beforeEach(() => {
+    (AccessibilityInfo.announceForAccessibility as jest.Mock).mockClear();
+  });
+
+  it('returns a no-op when enabled is false', async () => {
+    const { result } = renderHook(() => useAccessibilityAnnouncer(), { wrapper: wrapper(false) });
+    result.current('hello');
+    await new Promise((r) => setTimeout(r, 80));
+    expect(AccessibilityInfo.announceForAccessibility).not.toHaveBeenCalled();
+  });
+
+  it('announces via AccessibilityInfo when enabled', async () => {
+    const { result } = renderHook(() => useAccessibilityAnnouncer(), { wrapper: wrapper(true) });
+    result.current('hello');
+    await waitFor(() =>
+      expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledWith('hello'),
+    );
+  });
+
+  it('flushes only the latest message per priority within the debounce window', async () => {
+    const { result } = renderHook(() => useAccessibilityAnnouncer(), { wrapper: wrapper(true) });
+    result.current('first');
+    result.current('second');
+    result.current('third');
+    await waitFor(() =>
+      expect(AccessibilityInfo.announceForAccessibility).toHaveBeenCalledWith('third'),
+    );
+    expect(AccessibilityInfo.announceForAccessibility).not.toHaveBeenCalledWith('first');
+    expect(AccessibilityInfo.announceForAccessibility).not.toHaveBeenCalledWith('second');
+  });
+
+  it('ignores empty messages', async () => {
+    const { result } = renderHook(() => useAccessibilityAnnouncer(), { wrapper: wrapper(true) });
+    result.current('');
+    await new Promise((r) => setTimeout(r, 80));
+    expect(AccessibilityInfo.announceForAccessibility).not.toHaveBeenCalled();
+  });
+
+  it('clears pending announcements on unmount', async () => {
+    const { result, unmount } = renderHook(() => useAccessibilityAnnouncer(), {
+      wrapper: wrapper(true),
+    });
+
+    result.current('hello');
+    unmount();
+
+    await new Promise((r) => setTimeout(r, 80));
+    expect(AccessibilityInfo.announceForAccessibility).not.toHaveBeenCalled();
+  });
+});

package/src/components/Accessibility/hooks/useIncomingMessageAnnouncements.ts

@@ -0,0 +1,157 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import type { Channel, Event, MessageResponse } from 'stream-chat';
+
+import { useAccessibilityContext } from '../../../contexts/accessibilityContext/AccessibilityContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useAccessibilityAnnouncer } from '../useAccessibilityAnnouncer';
+
+const MESSAGE_ANNOUNCEMENT_THROTTLE_MS = 1000;
+
+const isAnnounceableIncomingMessage = (message: MessageResponse, ownUserId?: string): boolean => {
+  const messageUserId = message.user?.id;
+  if (!message.id || !messageUserId || messageUserId === ownUserId) return false;
+  return (
+    message.type !== 'deleted' &&
+    message.type !== 'ephemeral' &&
+    message.type !== 'error' &&
+    message.type !== 'system' &&
+    message.status !== 'failed' &&
+    message.status !== 'sending'
+  );
+};
+
+const getSenderName = (
+  message: MessageResponse,
+  t: ReturnType<typeof useTranslationContext>['t'],
+) => message.user?.name?.trim() || message.user?.id || t('Anonymous');
+
+export type UseIncomingMessageAnnouncementsParams = {
+  activeThreadId?: string;
+  channel?: Channel;
+  ownUserId?: string;
+  threadList?: boolean;
+};
+
+/**
+ * Mirrors stream-chat-react's `useIncomingMessageAnnouncements`:
+ *  - 1 message → "New message from {{user}}"
+ *  - >1 messages within throttle window → "{{count}} new messages"
+ *  - Throttled to one announcement per second
+ *  - Bounded `announcedMessageIds` set so a long-running session does not leak.
+ *
+ * Subscribes to `channel.on('message.new')`. When AccessibilityContext.enabled
+ * is false OR `announceNewMessages` is false, the hook is a no-op (no
+ * subscription is opened, no listener cost is paid).
+ */
+export const useIncomingMessageAnnouncements = ({
+  activeThreadId,
+  channel,
+  ownUserId,
+  threadList = false,
+}: UseIncomingMessageAnnouncementsParams) => {
+  const { announceNewMessages, enabled } = useAccessibilityContext();
+  const announce = useAccessibilityAnnouncer();
+  const { t } = useTranslationContext();
+  const lastAnnouncementTimestampRef = useRef(0);
+  const flushTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const announcedMessageIdsRef = useRef(new Set<string>());
+  const pendingAnnouncementBatchRef = useRef<{ count: number; firstSender: string | null }>({
+    count: 0,
+    firstSender: null,
+  });
+
+  const flushPendingAnnouncements = useCallback(() => {
+    const pending = pendingAnnouncementBatchRef.current;
+    if (pending.count <= 0) return;
+
+    if (pending.count === 1) {
+      announce(
+        t('a11y/New message from {{user}}', {
+          user: pending.firstSender || t('Anonymous'),
+        }),
+      );
+    } else {
+      announce(t('a11y/{{count}} new messages', { count: pending.count }));
+    }
+
+    pending.count = 0;
+    pending.firstSender = null;
+    lastAnnouncementTimestampRef.current = Date.now();
+  }, [announce, t]);
+
+  const scheduleFlush = useCallback(() => {
+    if (flushTimeoutRef.current) return;
+    const now = Date.now();
+    const elapsed = now - lastAnnouncementTimestampRef.current;
+    if (elapsed >= MESSAGE_ANNOUNCEMENT_THROTTLE_MS) {
+      flushPendingAnnouncements();
+      return;
+    }
+    flushTimeoutRef.current = setTimeout(() => {
+      flushTimeoutRef.current = undefined;
+      flushPendingAnnouncements();
+    }, MESSAGE_ANNOUNCEMENT_THROTTLE_MS - elapsed);
+  }, [flushPendingAnnouncements]);
+
+  useEffect(
+    () => () => {
+      if (flushTimeoutRef.current) clearTimeout(flushTimeoutRef.current);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!enabled || !announceNewMessages || !channel) return;
+
+    const handleMessageNew = (event: Event) => {
+      const message = event.message;
+      if (!message) return;
+      if (
+        (event.cid && event.cid !== channel.cid) ||
+        !isAnnounceableIncomingMessage(message, ownUserId)
+      ) {
+        return;
+      }
+
+      const isReply = !!message.parent_id;
+      const belongsToActiveThread = !!activeThreadId && message.parent_id === activeThreadId;
+      const shouldAnnounceInThreadList = threadList && belongsToActiveThread;
+      const shouldAnnounceInMainList = !threadList && !isReply;
+      if (!shouldAnnounceInThreadList && !shouldAnnounceInMainList) return;
+
+      if (announcedMessageIdsRef.current.has(message.id || '')) return;
+      if (message.id) {
+        if (announcedMessageIdsRef.current.size > 500) {
+          announcedMessageIdsRef.current.clear();
+        }
+        announcedMessageIdsRef.current.add(message.id);
+      }
+
+      pendingAnnouncementBatchRef.current.count += 1;
+      if (!pendingAnnouncementBatchRef.current.firstSender) {
+        pendingAnnouncementBatchRef.current.firstSender = getSenderName(message, t);
+      }
+
+      scheduleFlush();
+    };
+
+    const subscription = channel.on('message.new', handleMessageNew);
+    return () => {
+      subscription.unsubscribe();
+      if (flushTimeoutRef.current) {
+        clearTimeout(flushTimeoutRef.current);
+        flushTimeoutRef.current = undefined;
+      }
+    };
+  }, [
+    activeThreadId,
+    announceNewMessages,
+    channel,
+    enabled,
+    ownUserId,
+    scheduleFlush,
+    t,
+    threadList,
+  ]);
+};

package/src/components/Accessibility/index.ts

@@ -0,0 +1,3 @@
+export * from './NotificationAnnouncer';
+export * from './useAccessibilityAnnouncer';
+export * from './hooks/useIncomingMessageAnnouncements';

package/src/components/Accessibility/useAccessibilityAnnouncer.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+
+export type AccessibilityAnnouncePriority = 'assertive' | 'polite';
+export type AccessibilityAnnounce = (
+  message: string,
+  priority?: AccessibilityAnnouncePriority,
+) => void;
+
+export type AccessibilityAnnouncerContextValue = {
+  announce: AccessibilityAnnounce;
+};
+
+const noopAnnounce: AccessibilityAnnounce = () => undefined;
+
+export const AccessibilityAnnouncerContext = createContext<
+  AccessibilityAnnouncerContextValue | undefined
+>(undefined);
+
+/**
+ * Returns the imperative announcer. When called outside the AccessibilityProvider's
+ * announcer context (which happens any time the SDK's a11y is disabled), this
+ * returns a no-op.
+ *
+ * Mirrors the React SDK's `useAriaLiveAnnouncer` so cross-SDK code reads the same.
+ */
+export const useAccessibilityAnnouncer = (): AccessibilityAnnounce => {
+  const contextValue = useContext(AccessibilityAnnouncerContext);
+  if (!contextValue) return noopAnnounce;
+  return contextValue.announce;
+};

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -6,11 +6,13 @@ import {
   Platform,
   View,
   LayoutChangeEvent,
+  useWindowDimensions,
 } from 'react-native';
 
 import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 
 import { useBottomSheetSpringConfigs } from '@gorhom/bottom-sheet';
+import type { BottomSheetBackgroundProps } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
@@ -38,13 +40,14 @@ export const AttachmentPicker = () => {
     attachmentPickerStore,
     attachmentPickerBottomSheetHeight,
     bottomSheetRef: ref,
+    bottomInset,
     disableAttachmentPicker,
   } = useAttachmentPickerContext();
   const { AttachmentPickerContent, AttachmentPickerSelectionBar } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
-
+  const { height: windowHeight } = useWindowDimensions();
   const [currentIndex, setCurrentIndexInternal] = useState(-1);
   const currentIndexRef = useRef<number>(currentIndex);
   const setCurrentIndex = useStableCallback((_: number, toIndex: number) => {
@@ -99,6 +102,10 @@ export const AttachmentPicker = () => {
   const selectionBarRef = useRef<number | null>(null);
 
   const initialSnapPoint = attachmentPickerBottomSheetHeight;
+  const pickerTopInset = Math.max(
+    0,
+    windowHeight - attachmentPickerBottomSheetHeight - bottomInset,
+  );
 
   /**
    * Snap points changing cause a rerender of the position,
@@ -150,8 +157,13 @@ export const AttachmentPicker = () => {
 
   return (
     <BottomSheet
+      accessible={false}
+      accessibilityLabel={null}
+      accessibilityRole={null}
       android_keyboardInputMode='adjustResize'
+      backgroundComponent={AttachmentPickerBackground}
       backgroundStyle={backgroundStyle}
+      bottomInset={bottomInset}
       enablePanDownToClose={false}
       enableContentPanningGesture={false}
       enableDynamicSizing={false}
@@ -162,6 +174,7 @@ export const AttachmentPicker = () => {
       // @ts-ignore
       ref={ref}
       snapPoints={snapPoints}
+      topInset={pickerTopInset}
       animationConfigs={animationConfigs}
     >
       <View onLayout={onAttachmentPickerSelectionBarLayout}>
@@ -178,4 +191,13 @@ export const AttachmentPicker = () => {
 
 const RenderNull = () => null;
 
+const AttachmentPickerBackground = ({ pointerEvents, style }: BottomSheetBackgroundProps) => (
+  <View
+    accessible={false}
+    importantForAccessibility='no'
+    pointerEvents={pointerEvents}
+    style={style}
+  />
+);
+
 AttachmentPicker.displayName = 'AttachmentPicker';

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx

@@ -172,6 +172,7 @@ export const AttachmentMediaPicker = (props: AttachmentPickerContentProps) => {
       numColumns={numberOfColumns}
       onEndReached={photoError ? undefined : getMorePhotos}
       renderItem={renderAttachmentPickerItem}
+      showsVerticalScrollIndicator={false}
       testID={'attachment-picker-list'}
       updateCellsBatchingPeriod={16}
     />