stream-chat-react-native-core 9.0.0-beta.9 → 9.0.0

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -17,11 +17,12 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
 import { EyeOpen } from '../../../icons/EyeOpen';
-import { primitives } from '../../../theme';
+import { components, primitives } from '../../../theme';
+import { Button } from '../../ui/';
 
 export type GiphyPropsWithContext = Pick<
   MessageContextValue,
-  'handleAction' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
+  'handleAction' | 'isMyMessage' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
   Pick<MessagesContextValue, 'additionalPressableProps' | 'giphyVersion'> & {
     attachment: Attachment;
@@ -33,6 +34,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
     attachment,
     giphyVersion,
     handleAction,
+    isMyMessage,
     onLongPress,
     onPress,
     onPressIn,
@@ -46,20 +48,13 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
   const {
     theme: {
       messageItemView: {
-        giphy: {
-          actionButtonContainer,
-          actionButton,
-          actionButtonText,
-          container,
-          giphyHeaderText,
-          header,
-        },
+        giphy: { actionButtonContainer, actionButton, container, giphyHeaderText, header },
       },
       semantics,
     },
   } = useTheme();
 
-  const styles = useStyles();
+  const styles = useStyles({ hasActions: !!actions, isMyMessage });
 
   const uri = image_url || thumb_url;
 
@@ -68,7 +63,10 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
   }
 
   return actions ? (
-    <View style={[styles.container, container]} testID='giphy-action-attachment'>
+    <View
+      style={[styles.container, styles.actionContainer, container]}
+      testID='giphy-action-attachment'
+    >
       <View style={[styles.header, header]}>
         <EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
         <Text style={[styles.headerText, giphyHeaderText]}>{t('Only visible to you')}</Text>
@@ -76,33 +74,23 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} preview />
       <View style={[styles.actionButtonContainer, actionButtonContainer]}>
         {actions.map((action) => {
+          const isPrimaryAction = action.text === 'Send';
           return (
-            <Pressable
+            <Button
               key={action.value}
+              variant={isPrimaryAction ? 'primary' : 'secondary'}
+              type='ghost'
+              size='sm'
+              testID={`${action.value}-action-button`}
               onPress={() => {
                 if (action?.name && action?.value && handleAction) {
                   handleAction(action.name, action.value);
                 }
               }}
+              iconOnly={false}
+              label={action.text}
               style={[styles.actionButton, actionButton]}
-              testID={`${action.value}-action-button`}
-            >
-              <Text
-                numberOfLines={1}
-                style={[
-                  styles.actionButtonText,
-                  {
-                    color:
-                      action.text === 'Send'
-                        ? semantics.buttonPrimaryText
-                        : semantics.buttonSecondaryText,
-                  },
-                  actionButtonText,
-                ]}
-              >
-                {action.text}
-              </Text>
-            </Pressable>
+            />
           );
         })}
       </View>
@@ -135,7 +123,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
         }
       }}
       testID='giphy-attachment'
-      style={styles.container}
+      style={[styles.container, container]}
       {...additionalPressableProps}
     >
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} />
@@ -147,10 +135,12 @@ const areEqual = (prevProps: GiphyPropsWithContext, nextProps: GiphyPropsWithCon
   const {
     attachment: { actions: prevActions, image_url: prevImageUrl, thumb_url: prevThumbUrl },
     giphyVersion: prevGiphyVersion,
+    isMyMessage: prevIsMyMessage,
   } = prevProps;
   const {
     attachment: { actions: nextActions, image_url: nextImageUrl, thumb_url: nextThumbUrl },
     giphyVersion: nextGiphyVersion,
+    isMyMessage: nextIsMyMessage,
   } = nextProps;
 
   const imageUrlEqual = prevImageUrl === nextImageUrl;
@@ -178,6 +168,11 @@ const areEqual = (prevProps: GiphyPropsWithContext, nextProps: GiphyPropsWithCon
     return false;
   }
 
+  const isMyMessageEqual = prevIsMyMessage === nextIsMyMessage;
+  if (!isMyMessageEqual) {
+    return false;
+  }
+
   return true;
 };
 
@@ -191,7 +186,8 @@ export type GiphyProps = Partial<GiphyPropsWithContext> & {
  * UI component for card in attachments.
  */
 export const Giphy = (props: GiphyProps) => {
-  const { handleAction, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
+  const { handleAction, isMyMessage, onLongPress, onPress, onPressIn, preventPress } =
+    useMessageContext();
   const { additionalPressableProps, giphyVersion } = useMessagesContext();
 
   return (
@@ -200,6 +196,7 @@ export const Giphy = (props: GiphyProps) => {
         additionalPressableProps,
         giphyVersion,
         handleAction,
+        isMyMessage,
         onLongPress,
         onPress,
         onPressIn,
@@ -212,33 +209,39 @@ export const Giphy = (props: GiphyProps) => {
 
 Giphy.displayName = 'Giphy{messageItemView{giphy}}';
 
-const useStyles = () => {
+const useStyles = ({
+  hasActions,
+  isMyMessage,
+}: Pick<GiphyPropsWithContext, 'isMyMessage'> & { hasActions: boolean }) => {
   const {
     theme: { semantics },
   } = useTheme();
   return useMemo(() => {
     return StyleSheet.create({
       container: {
-        backgroundColor: semantics.chatBgOutgoing,
+        backgroundColor: hasActions
+          ? semantics.chatBgOutgoing
+          : isMyMessage
+            ? semantics.chatBgAttachmentOutgoing
+            : semantics.chatBgAttachmentIncoming,
         borderRadius: primitives.radiusLg,
         maxWidth: 256, // TODO: Not sure how to fix this
         overflow: 'hidden',
       },
       actionButtonContainer: {
+        alignSelf: 'center',
         flexDirection: 'row',
         gap: primitives.spacingXs,
-      },
-      actionButton: {
-        alignItems: 'center',
-        flex: 1,
+        paddingHorizontal: primitives.spacingXxs,
         justifyContent: 'center',
-        paddingVertical: primitives.spacingSm,
       },
-      actionButtonText: {
-        fontSize: primitives.typographyFontSizeMd,
-        fontWeight: primitives.typographyFontWeightSemiBold,
-        lineHeight: primitives.typographyLineHeightNormal,
-        color: semantics.buttonSecondaryText,
+      actionContainer: {},
+      actionButton: {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        width: undefined,
+        minHeight: components.buttonHitTargetMinHeight,
       },
       header: {
         alignItems: 'center',
@@ -254,5 +257,5 @@ const useStyles = () => {
         lineHeight: primitives.typographyLineHeightTight,
       },
     });
-  }, [semantics]);
+  }, [hasActions, isMyMessage, semantics]);
 };

package/src/components/Attachment/Giphy/GiphyImage.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, ImageProps, StyleSheet, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
-import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import {
   MessagesContextValue,
@@ -15,27 +15,19 @@ import { useLoadingImage } from '../../../hooks/useLoadingImage';
 import { makeImageCompatibleUrl } from '../../../utils/utils';
 import { GiphyBadge } from '../../ui/Badge/GiphyBadge';
 
-export type GiphyImagePropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<
-    MessagesContextValue,
-    'giphyVersion' | 'ImageLoadingIndicator' | 'ImageLoadingFailedIndicator'
-  > & {
-    attachment: Attachment;
-    /**
-     * Whether to render the preview image or the full image
-     */
-    preview?: boolean;
-  };
+export type GiphyImagePropsWithContext = Pick<MessagesContextValue, 'giphyVersion'> & {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & {
+  attachment: Attachment;
+  /**
+   * Whether to render the preview image or the full image
+   */
+  preview?: boolean;
+};
 
 const GiphyImageWithContext = (props: GiphyImagePropsWithContext) => {
-  const {
-    attachment,
-    giphyVersion,
-    ImageComponent = Image,
-    ImageLoadingFailedIndicator,
-    ImageLoadingIndicator,
-    preview = false,
-  } = props;
+  const { attachment, giphyVersion, ImageComponent = Image, preview = false } = props;
+  const { ImageLoadingFailedIndicator, ImageLoadingIndicator } = useComponentsContext();
 
   const { giphy: giphyData, image_url, thumb_url, type } = attachment;
 
@@ -97,12 +89,16 @@ const GiphyImageWithContext = (props: GiphyImagePropsWithContext) => {
         style={[styles.giphy, giphyDimensions, giphy]}
       />
       {isLoadingImageError && (
-        <View style={[styles.imageIndicatorContainer, imageIndicatorContainer]}>
+        <View
+          style={[StyleSheet.absoluteFill, styles.imageIndicatorContainer, imageIndicatorContainer]}
+        >
           <ImageLoadingFailedIndicator onReloadImage={onReloadImage} />
         </View>
       )}
       {isLoadingImage && (
-        <View style={[styles.imageIndicatorContainer, imageIndicatorContainer]}>
+        <View
+          style={[StyleSheet.absoluteFill, styles.imageIndicatorContainer, imageIndicatorContainer]}
+        >
           <ImageLoadingIndicator />
         </View>
       )}
@@ -164,25 +160,11 @@ export type GiphyImageProps = Partial<GiphyImagePropsWithContext> & {
  * UI component for card in attachments.
  */
 export const GiphyImage = (props: GiphyImageProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { giphyVersion } = useMessagesContext();
 
-  const {
-    ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
-    ImageLoadingIndicator: ContextImageLoadingIndicator,
-  } = useMessagesContext();
-  const ImageLoadingFailedIndicator =
-    ContextImageLoadingFailedIndicator || props.ImageLoadingFailedIndicator;
-  const ImageLoadingIndicator = ContextImageLoadingIndicator || props.ImageLoadingIndicator;
-
   return (
-    <MemoizedGiphyImage
-      giphyVersion={giphyVersion}
-      ImageComponent={ImageComponent}
-      ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
-      ImageLoadingIndicator={ImageLoadingIndicator}
-      {...props}
-    />
+    <MemoizedGiphyImage giphyVersion={giphyVersion} ImageComponent={ImageComponent} {...props} />
   );
 };
 
@@ -201,7 +183,6 @@ const useStyles = () => {
       },
       imageContainer: {},
       imageIndicatorContainer: {
-        ...StyleSheet.absoluteFillObject,
         alignItems: 'center',
         justifyContent: 'center',
       },

package/src/components/Attachment/ImageLoadingFailedIndicator.tsx

@@ -34,7 +34,7 @@ export const ImageLoadingFailedIndicator = ({
       accessibilityLabel='Image Loading Error Indicator'
       onLongPress={onLongPress}
       onPress={onReloadImage}
-      style={styles.imageLoadingErrorIndicatorStyle}
+      style={[StyleSheet.absoluteFill, styles.imageLoadingErrorIndicatorStyle]}
     >
       <RetryBadge size='lg' />
     </Pressable>
@@ -48,7 +48,6 @@ const useStyles = () => {
   return useMemo(() => {
     return StyleSheet.create({
       imageLoadingErrorIndicatorStyle: {
-        ...StyleSheet.absoluteFillObject,
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: semantics.backgroundCoreOverlayLight,

package/src/components/Attachment/ImageLoadingIndicator.tsx

@@ -14,7 +14,7 @@ export const ImageLoadingIndicator = () => {
       accessible
       enabled
       gradientColor={semantics.skeletonLoadingHighlight}
-      style={StyleSheet.absoluteFillObject}
+      style={StyleSheet.absoluteFill}
     >
       <View pointerEvents='none' style={styles.centered}>
         <ActivityIndicator />

package/src/components/Attachment/UnsupportedAttachment.tsx

@@ -3,32 +3,27 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
-import { FileIconProps } from './FileIcon';
+import type { FileIconProps } from './FileIcon';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { primitives } from '../../theme';
 
-export type UnsupportedAttachmentProps = Partial<
-  Pick<MessagesContextValue, 'FileAttachmentIcon'> & Pick<MessageContextValue, 'isMyMessage'>
-> & {
+export type UnsupportedAttachmentProps = Partial<Pick<MessageContextValue, 'isMyMessage'>> & {
   /** The attachment to render */
   attachment: Attachment;
   attachmentIconSize?: FileIconProps['size'];
 };
 
 export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
-  const { FileAttachmentIcon: FileAttachmentIconDefault } = useMessagesContext();
+  const { FileAttachmentIcon } = useComponentsContext();
   const { isMyMessage } = useMessageContext();
-  const { attachment, attachmentIconSize, FileAttachmentIcon = FileAttachmentIconDefault } = props;
+  const { attachment, attachmentIconSize } = props;
 
   const styles = useStyles({ isMyMessage });
 

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import {
   Image,
+  ImageProps,
   ImageStyle,
   Pressable,
   StyleProp,
@@ -13,7 +14,7 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
-import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import {
   MessageContextValue,
@@ -24,7 +25,7 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/Link';
+import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';
@@ -32,8 +33,9 @@ import { VideoPlayIndicator } from '../../ui';
 import { ImageBackground } from '../../UIComponents/ImageBackground';
 import { openUrlSafely } from '../utils/openUrlSafely';
 
-export type URLPreviewPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
+export type URLPreviewPropsWithContext = {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<
     MessagesContextValue,
     'additionalPressableProps' | 'myMessageTheme' | 'isAttachmentEqual'
@@ -210,7 +212,7 @@ export type URLPreviewProps = Partial<URLPreviewPropsWithContext> & {
  * UI component for card in attachments.
  */
 export const URLPreview = (props: URLPreviewProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { message, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
   const { additionalPressableProps, isAttachmentEqual, myMessageTheme } = useMessagesContext();
 

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import {
   Image,
+  ImageProps,
   ImageStyle,
   Pressable,
   StyleProp,
@@ -13,7 +14,7 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
-import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import {
   MessageContextValue,
@@ -24,7 +25,7 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { Link } from '../../../icons/Link';
+import { Link } from '../../../icons/link';
 import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { makeImageCompatibleUrl } from '../../../utils/utils';
@@ -32,8 +33,9 @@ import { VideoPlayIndicator } from '../../ui';
 import { ImageBackground } from '../../UIComponents/ImageBackground';
 import { openUrlSafely } from '../utils/openUrlSafely';
 
-export type URLPreviewCompactPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
+export type URLPreviewCompactPropsWithContext = {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<MessagesContextValue, 'additionalPressableProps' | 'myMessageTheme'> & {
     attachment: Attachment;
     channelId: string | undefined;
@@ -208,7 +210,7 @@ export type URLPreviewCompactProps = Partial<URLPreviewCompactPropsWithContext>
  * UI component for card in attachments.
  */
 export const URLPreviewCompact = (props: URLPreviewCompactProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { message, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
   const { additionalPressableProps, myMessageTheme } = useMessagesContext();
 

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -14,7 +14,7 @@ import { MessageProvider } from '../../../contexts/messageContext/MessageContext
 import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { mergeThemes, ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateGiphyAttachment } from '../../../mock-builders/generator/attachment';
@@ -36,6 +36,8 @@ const streami18n = new Streami18n({
 });
 
 describe('Giphy', () => {
+  const lightTheme = mergeThemes({ scheme: 'light' });
+
   const getAttachmentComponent = (props, messageContextValue = {}) => {
     const message = generateMessage();
     return (
@@ -115,6 +117,61 @@ describe('Giphy', () => {
     });
   });
 
+  it('uses the outgoing attachment background for outgoing giphys', async () => {
+    render(getAttachmentComponent({ attachment }, { isMyMessage: true }));
+
+    await waitFor(() => {
+      const style = screen.getByTestId('giphy-attachment').props.style;
+      expect(style).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: lightTheme.semantics.chatBgAttachmentOutgoing,
+          }),
+        ]),
+      );
+    });
+  });
+
+  it('uses the incoming attachment background for incoming giphys', async () => {
+    render(getAttachmentComponent({ attachment }, { isMyMessage: false }));
+
+    await waitFor(() => {
+      const style = screen.getByTestId('giphy-attachment').props.style;
+      expect(style).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: lightTheme.semantics.chatBgAttachmentIncoming,
+          }),
+        ]),
+      );
+    });
+  });
+
+  it('uses the outgoing bubble background for ephemeral giphy previews', async () => {
+    render(
+      getAttachmentComponent(
+        {
+          attachment: {
+            ...attachment,
+            actions,
+          },
+        },
+        { isMyMessage: false },
+      ),
+    );
+
+    await waitFor(() => {
+      const style = screen.getByTestId('giphy-action-attachment').props.style;
+      expect(style).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: lightTheme.semantics.chatBgOutgoing,
+          }),
+        ]),
+      );
+    });
+  });
+
   it('"giphy" attachment size should be customisable', async () => {
     attachment.giphy = giphy;
     render(getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }));

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -8,11 +8,15 @@ import {
   LayoutChangeEvent,
 } from 'react-native';
 
+import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+
 import { useBottomSheetSpringConfigs } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
 import { KeyboardControllerPackage } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
@@ -32,12 +36,14 @@ export const AttachmentPicker = () => {
   const {
     closePicker,
     attachmentPickerStore,
-    AttachmentPickerSelectionBar,
-    AttachmentPickerContent,
     attachmentPickerBottomSheetHeight,
     bottomSheetRef: ref,
     disableAttachmentPicker,
   } = useAttachmentPickerContext();
+  const { AttachmentPickerContent, AttachmentPickerSelectionBar } = useComponentsContext();
+  const {
+    theme: { semantics },
+  } = useTheme();
 
   const [currentIndex, setCurrentIndexInternal] = useState(-1);
   const currentIndexRef = useRef<number>(currentIndex);
@@ -105,15 +111,54 @@ export const AttachmentPicker = () => {
   });
 
   const animationConfigs = useBottomSheetSpringConfigs(SPRING_CONFIG);
+  const backgroundStyle = useMemo(
+    () => ({
+      backgroundColor: semantics.backgroundCoreElevation1,
+      borderTopWidth: 0,
+      elevation: Platform.OS === 'android' ? 0 : undefined,
+      shadowOpacity: Platform.OS === 'android' ? 0 : undefined,
+    }),
+    [semantics.backgroundCoreElevation1],
+  );
+
+  const animatedIndex = useSharedValue(currentIndex);
+
+  // This is required to prevent the attachment picker from getting out of sync
+  // with the rest of the state. While there are more prudent fixes, this is about
+  // as much as we can do now without refactoring the entire state layer for the
+  // picker. When we do that, this can be removed completely.
+  const reactToIndex = useStableCallback((index: number) => {
+    if (index === -1) {
+      attachmentPickerStore.setSelectedPicker(undefined);
+    }
+
+    if (index === 0) {
+      // TODO: Extend the store to at least accept a default value.
+      //       This in particular is not nice.
+      attachmentPickerStore.setSelectedPicker('images');
+    }
+  });
+
+  useAnimatedReaction(
+    () => animatedIndex.value,
+    (index, previousIndex) => {
+      if ((index === 0 || index === -1) && index !== previousIndex) {
+        runOnJS(reactToIndex)(index);
+      }
+    },
+  );
 
   return (
     <BottomSheet
+      android_keyboardInputMode='adjustResize'
+      backgroundStyle={backgroundStyle}
       enablePanDownToClose={false}
       enableContentPanningGesture={false}
       enableDynamicSizing={false}
       handleComponent={RenderNull}
       index={currentIndex}
       onAnimate={setCurrentIndex}
+      animatedIndex={animatedIndex}
       // @ts-ignore
       ref={ref}
       snapPoints={snapPoints}