stream-chat-react-native-core 5.4.2-beta.1 → 5.4.2-beta.3

package/lib/module/hooks/useAppStateListener.js

@@ -1,31 +1,25 @@
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAppStateListener = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
 
 var _reactNative = require("react-native");
 
 var useAppStateListener = function useAppStateListener(onForeground, onBackground) {
-  var _useState = (0, _react.useState)(_reactNative.AppState.currentState),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      appState = _useState2[0],
-      setAppState = _useState2[1];
-
+  var appStateRef = (0, _react.useRef)(_reactNative.AppState.currentState);
   var handleAppStateChange = (0, _react.useCallback)(function (nextAppState) {
-    if (appState === 'background' && nextAppState === 'active' && onForeground) {
-      onForeground();
-    } else if (appState.match(/active|inactive/) && nextAppState === 'background' && onBackground) {
-      onBackground();
+    var prevAppState = appStateRef.current;
+
+    if (prevAppState.match(/inactive|background/) && nextAppState === 'active') {
+      onForeground == null ? void 0 : onForeground();
+    } else if (prevAppState === 'active' && nextAppState.match(/inactive|background/)) {
+      onBackground == null ? void 0 : onBackground();
     }
 
-    setAppState(nextAppState);
-  }, [onBackground, onForeground, appState]);
+    appStateRef.current = nextAppState;
+  }, [onBackground, onForeground]);
   (0, _react.useEffect)(function () {
     var subscription = _reactNative.AppState.addEventListener('change', handleAppStateChange);
 

package/lib/module/hooks/useAppStateListener.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAppStateListener.ts"],"names":["useAppStateListener","onForeground","onBackground","AppState","currentState","appState","setAppState","handleAppStateChange","nextAppState","match","subscription","addEventListener","remove","removeEventListener"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,YAAD,EAA4BC,YAA5B,EAA0D;AAC3F,kBAAgC,qBAASC,sBAASC,YAAlB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AACA,MAAMC,oBAAoB,GAAG,wBAC3B,UAACC,YAAD,EAAkC;AAChC,QAAIH,QAAQ,KAAK,YAAb,IAA6BG,YAAY,KAAK,QAA9C,IAA0DP,YAA9D,EAA4E;AAC1EA,MAAAA,YAAY;AACb,KAFD,MAEO,IACLI,QAAQ,CAACI,KAAT,CAAe,iBAAf,KACAD,YAAY,KAAK,YADjB,IAEAN,YAHK,EAIL;AACAA,MAAAA,YAAY;AACb;;AACDI,IAAAA,WAAW,CAACE,YAAD,CAAX;AACD,GAZ0B,EAa3B,CAACN,YAAD,EAAeD,YAAf,EAA6BI,QAA7B,CAb2B,CAA7B;AAgBA,wBAAU,YAAM;AACd,QAAMK,YAAY,GAAGP,sBAASQ,gBAAT,CAA0B,QAA1B,EAAoCJ,oBAApC,CAArB;;AAEA,WAAO,YAAM;AAGX,UAAIG,YAAJ,YAAIA,YAAY,CAAEE,MAAlB,EAA0B;AACxBF,QAAAA,YAAY,CAACE,MAAb;AACD,OAFD,MAEO;AACLT,8BAASU,mBAAT,CAA6B,QAA7B,EAAuCN,oBAAvC;AACD;AACF,KARD;AASD,GAZD,EAYG,CAACA,oBAAD,CAZH;AAaD,CA/BM","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { AppState, AppStateStatus } from 'react-native';\n\nexport const useAppStateListener = (onForeground?: () => void, onBackground?: () => void) => {\n  const [appState, setAppState] = useState(AppState.currentState);\n  const handleAppStateChange = useCallback(\n    (nextAppState: AppStateStatus) => {\n      if (appState === 'background' && nextAppState === 'active' && onForeground) {\n        onForeground();\n      } else if (\n        appState.match(/active|inactive/) &&\n        nextAppState === 'background' &&\n        onBackground\n      ) {\n        onBackground();\n      }\n      setAppState(nextAppState);\n    },\n    [onBackground, onForeground, appState],\n  );\n\n  useEffect(() => {\n    const subscription = AppState.addEventListener('change', handleAppStateChange);\n\n    return () => {\n      // Following if-else logic is to support RN >= 0.65 and RN < 0.65 versions.\n      // https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#:~:text=EventEmitter%23removeSubscription%20is%20now%20deprecated.%20(cb6cbd12f8%20by%20%40yungsters)\n      if (subscription?.remove) {\n        subscription.remove();\n      } else {\n        AppState.removeEventListener('change', handleAppStateChange);\n      }\n    };\n  }, [handleAppStateChange]);\n};\n"]}
+{"version":3,"sources":["useAppStateListener.ts"],"names":["useAppStateListener","onForeground","onBackground","appStateRef","AppState","currentState","handleAppStateChange","nextAppState","prevAppState","current","match","subscription","addEventListener","remove","removeEventListener"],"mappings":";;;;;AAAA;;AACA;;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,YAAD,EAA4BC,YAA5B,EAA0D;AAC3F,MAAMC,WAAW,GAAG,mBAAOC,sBAASC,YAAhB,CAApB;AACA,MAAMC,oBAAoB,GAAG,wBAC3B,UAACC,YAAD,EAAkC;AAChC,QAAMC,YAAY,GAAGL,WAAW,CAACM,OAAjC;;AACA,QAAID,YAAY,CAACE,KAAb,CAAmB,qBAAnB,KAA6CH,YAAY,KAAK,QAAlE,EAA4E;AAC1EN,MAAAA,YAAY,QAAZ,YAAAA,YAAY;AACb,KAFD,MAEO,IAAIO,YAAY,KAAK,QAAjB,IAA6BD,YAAY,CAACG,KAAb,CAAmB,qBAAnB,CAAjC,EAA4E;AACjFR,MAAAA,YAAY,QAAZ,YAAAA,YAAY;AACb;;AACDC,IAAAA,WAAW,CAACM,OAAZ,GAAsBF,YAAtB;AACD,GAT0B,EAU3B,CAACL,YAAD,EAAeD,YAAf,CAV2B,CAA7B;AAaA,wBAAU,YAAM;AACd,QAAMU,YAAY,GAAGP,sBAASQ,gBAAT,CAA0B,QAA1B,EAAoCN,oBAApC,CAArB;;AAEA,WAAO,YAAM;AAGX,UAAIK,YAAJ,YAAIA,YAAY,CAAEE,MAAlB,EAA0B;AACxBF,QAAAA,YAAY,CAACE,MAAb;AACD,OAFD,MAEO;AACLT,8BAASU,mBAAT,CAA6B,QAA7B,EAAuCR,oBAAvC;AACD;AACF,KARD;AASD,GAZD,EAYG,CAACA,oBAAD,CAZH;AAaD,CA5BM","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { AppState, AppStateStatus } from 'react-native';\n\nexport const useAppStateListener = (onForeground?: () => void, onBackground?: () => void) => {\n  const appStateRef = useRef(AppState.currentState);\n  const handleAppStateChange = useCallback(\n    (nextAppState: AppStateStatus) => {\n      const prevAppState = appStateRef.current;\n      if (prevAppState.match(/inactive|background/) && nextAppState === 'active') {\n        onForeground?.();\n      } else if (prevAppState === 'active' && nextAppState.match(/inactive|background/)) {\n        onBackground?.();\n      }\n      appStateRef.current = nextAppState;\n    },\n    [onBackground, onForeground],\n  );\n\n  useEffect(() => {\n    const subscription = AppState.addEventListener('change', handleAppStateChange);\n\n    return () => {\n      // Following if-else logic is to support RN >= 0.65 and RN < 0.65 versions.\n      // https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#:~:text=EventEmitter%23removeSubscription%20is%20now%20deprecated.%20(cb6cbd12f8%20by%20%40yungsters)\n      if (subscription?.remove) {\n        subscription.remove();\n      } else {\n        AppState.removeEventListener('change', handleAppStateChange);\n      }\n    };\n  }, [handleAppStateChange]);\n};\n"]}

package/lib/module/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.4.2-beta.1"
+  "version": "5.4.2-beta.3"
 }

package/lib/typescript/components/AttachmentPicker/AttachmentPicker.d.ts

@@ -1,17 +1,6 @@
 import React from 'react';
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
-import type { Asset, File } from '../../types/types';
-export declare type AttachmentPickerItemType = {
-    asset: Asset;
-    ImageOverlaySelectedComponent: React.ComponentType;
-    maxNumberOfFiles: number;
-    numberOfUploads: number;
-    selected: boolean;
-    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-    setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
-    numberOfAttachmentPickerImageColumns?: number;
-};
 export declare type AttachmentPickerProps = {
     /**
      * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) of attachment picker.

package/lib/typescript/components/AttachmentPicker/components/AttachmentPickerItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Asset, File } from '../../../types/types';
+declare type AttachmentPickerItemType = {
+    asset: Asset;
+    ImageOverlaySelectedComponent: React.ComponentType;
+    maxNumberOfFiles: number;
+    numberOfUploads: number;
+    selected: boolean;
+    setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
+    numberOfAttachmentPickerImageColumns?: number;
+};
+export declare const renderAttachmentPickerItem: ({ item }: {
+    item: AttachmentPickerItemType;
+}) => JSX.Element;
+export {};

package/lib/typescript/contexts/messageInputContext/MessageInputContext.d.ts

@@ -166,7 +166,7 @@ export declare type LocalMessageInputContext<StreamChatGenerics extends DefaultS
         newImage: ImageUpload;
     }) => Promise<void>;
     uploadNewFile: (file: File) => Promise<void>;
-    uploadNewImage: (image: Asset) => Promise<void>;
+    uploadNewImage: (image: Partial<Asset>) => Promise<void>;
 };
 export declare type InputMessageInputContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /**

package/lib/typescript/hooks/__tests__/useAppStateListener.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.4.2-beta.1",
+  "version": "5.4.2-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -69,7 +69,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@gorhom/bottom-sheet": "^4.1.6",
+    "@gorhom/bottom-sheet": "4.4.5",
     "dayjs": "1.10.5",
     "file-loader": "6.2.0",
     "i18next": "20.2.4",

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -1,34 +1,19 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Alert,
-  BackHandler,
-  Dimensions,
-  ImageBackground,
-  Keyboard,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { BackHandler, Dimensions, Keyboard, Platform, StatusBar, StyleSheet } from 'react-native';
 
-import BottomSheet, {
-  BottomSheetFlatList,
-  BottomSheetHandleProps,
-  TouchableOpacity,
-} from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetFlatList, BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
-import { lookup } from 'mime-types';
 
 import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
 
+import { renderAttachmentPickerItem } from './components/AttachmentPickerItem';
+
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Recorder } from '../../icons';
-import { getLocalAssetUri, getPhotos } from '../../native';
-import type { Asset, File } from '../../types/types';
-import { vh, vw } from '../../utils/utils';
+import { getPhotos } from '../../native';
+import type { Asset } from '../../types/types';
+import { vh } from '../../utils/utils';
 
 dayjs.extend(duration);
 
@@ -36,238 +21,11 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
   },
-  durationText: {
-    fontWeight: 'bold',
-  },
-  overlay: {
-    alignItems: 'flex-end',
-    flex: 1,
-  },
-  videoView: {
-    bottom: 5,
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 5,
-    position: 'absolute',
-    width: '100%',
-  },
 });
 
 const screenHeight = vh(100);
 const fullScreenHeight = Dimensions.get('window').height;
 
-export type AttachmentPickerItemType = {
-  asset: Asset;
-  ImageOverlaySelectedComponent: React.ComponentType;
-  maxNumberOfFiles: number;
-  numberOfUploads: number;
-  selected: boolean;
-  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
-  setSelectedImages: React.Dispatch<React.SetStateAction<Asset[]>>;
-  numberOfAttachmentPickerImageColumns?: number;
-};
-
-type AttachmentImageProps = Omit<AttachmentPickerItemType, 'setSelectedFiles'>;
-
-type AttachmentVideoProps = Omit<AttachmentPickerItemType, 'setSelectedImages'>;
-
-const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
-  const {
-    asset,
-    ImageOverlaySelectedComponent,
-    maxNumberOfFiles,
-    numberOfAttachmentPickerImageColumns,
-    numberOfUploads,
-    selected,
-    setSelectedFiles,
-  } = props;
-
-  const {
-    theme: {
-      attachmentPicker: { durationText, image, imageOverlay },
-      colors: { overlay, white },
-    },
-  } = useTheme();
-
-  const { duration, playableDuration, uri } = asset;
-
-  const videoDuration = duration ? duration : playableDuration;
-
-  const ONE_HOUR_IN_SECONDS = 3600;
-
-  let durationLabel = '00:00';
-
-  if (videoDuration) {
-    const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1;
-    const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
-    const formattedVideoDuration = dayjs
-      .duration(videoDuration, 'second')
-      .format(formattedDurationParam);
-    durationLabel = formattedVideoDuration;
-  }
-
-  const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
-
-  const onPressVideo = async () => {
-    // For the case of expo messaging app where you need to fetch the asset uri from asset id
-    const localAssetURI = asset.id && (await getLocalAssetUri(asset.id));
-    if (selected) {
-      setSelectedFiles((files) => files.filter((file) => file.uri !== asset.uri));
-    } else {
-      setSelectedFiles((files) => {
-        if (numberOfUploads >= maxNumberOfFiles) {
-          Alert.alert('Maximum number of files reached');
-          return files;
-        }
-        return [
-          ...files,
-          {
-            duration: durationLabel,
-            name: asset.filename,
-            size: asset.fileSize,
-            type: 'video',
-            uri: localAssetURI || asset.uri,
-          },
-        ];
-      });
-    }
-  };
-
-  return (
-    <TouchableOpacity onPress={onPressVideo}>
-      <ImageBackground
-        source={{ uri }}
-        style={[
-          {
-            height: size,
-            margin: 1,
-            width: size,
-          },
-          image,
-        ]}
-      >
-        {selected && (
-          <View style={[styles.overlay, { backgroundColor: overlay }, imageOverlay]}>
-            <ImageOverlaySelectedComponent />
-          </View>
-        )}
-        <View style={styles.videoView}>
-          <Recorder height={20} pathFill={white} width={25} />
-          {videoDuration ? (
-            <Text style={[styles.durationText, durationText, { color: white }]}>
-              {durationLabel}
-            </Text>
-          ) : null}
-        </View>
-      </ImageBackground>
-    </TouchableOpacity>
-  );
-};
-
-const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
-  const {
-    asset,
-    ImageOverlaySelectedComponent,
-    maxNumberOfFiles,
-    numberOfAttachmentPickerImageColumns,
-    numberOfUploads,
-    selected,
-    setSelectedImages,
-  } = props;
-  const {
-    theme: {
-      attachmentPicker: { image, imageOverlay },
-      colors: { overlay },
-    },
-  } = useTheme();
-
-  const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
-
-  const { uri } = asset;
-
-  const onPressImage = () => {
-    if (selected) {
-      setSelectedImages((images) => images.filter((image) => image.uri !== asset.uri));
-    } else {
-      setSelectedImages((images) => {
-        if (numberOfUploads >= maxNumberOfFiles) {
-          Alert.alert('Maximum number of files reached');
-          return images;
-        }
-        return [...images, asset];
-      });
-    }
-  };
-
-  return (
-    <TouchableOpacity onPress={onPressImage}>
-      <ImageBackground
-        source={{ uri }}
-        style={[
-          {
-            height: size,
-            margin: 1,
-            width: size,
-          },
-          image,
-        ]}
-      >
-        {selected && (
-          <View style={[styles.overlay, { backgroundColor: overlay }, imageOverlay]}>
-            <ImageOverlaySelectedComponent />
-          </View>
-        )}
-      </ImageBackground>
-    </TouchableOpacity>
-  );
-};
-
-const renderItem = ({ item }: { item: AttachmentPickerItemType }) => {
-  const {
-    asset,
-    ImageOverlaySelectedComponent,
-    maxNumberOfFiles,
-    numberOfAttachmentPickerImageColumns,
-    numberOfUploads,
-    selected,
-    setSelectedFiles,
-    setSelectedImages,
-  } = item;
-
-  const contentType = lookup(asset.filename) || 'multipart/form-data';
-
-  const fileType = asset.filename
-    ? contentType.startsWith('image/')
-      ? 'image'
-      : 'video'
-    : asset.type === 'video'
-    ? 'video'
-    : 'image';
-
-  return fileType === 'image' ? (
-    <AttachmentImage
-      asset={asset}
-      ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
-      maxNumberOfFiles={maxNumberOfFiles}
-      numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
-      numberOfUploads={numberOfUploads}
-      selected={selected}
-      setSelectedImages={setSelectedImages}
-    />
-  ) : (
-    <AttachmentVideo
-      asset={asset}
-      ImageOverlaySelectedComponent={ImageOverlaySelectedComponent}
-      maxNumberOfFiles={maxNumberOfFiles}
-      numberOfAttachmentPickerImageColumns={numberOfAttachmentPickerImageColumns}
-      numberOfUploads={numberOfUploads}
-      selected={selected}
-      setSelectedFiles={setSelectedFiles}
-    />
-  );
-};
-
 export type AttachmentPickerProps = {
   /**
    * Custom UI component to render [draggable handle](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) of attachment picker.
@@ -337,35 +95,39 @@ export const AttachmentPicker = React.forwardRef(
     } = useAttachmentPickerContext();
 
     const [currentIndex, setCurrentIndex] = useState(-1);
-    const [endCursor, setEndCursor] = useState<string>();
+    const endCursorRef = useRef<string>();
     const [photoError, setPhotoError] = useState(false);
-    const [hasNextPage, setHasNextPage] = useState(true);
+    const hasNextPageRef = useRef(true);
     const [loadingPhotos, setLoadingPhotos] = useState(false);
     const [photos, setPhotos] = useState<Asset[]>([]);
-    const bottomSheetCloseOnKeyboardShowTimeout = useRef<NodeJS.Timeout>();
+    const attemptedToLoadPhotosOnOpenRef = useRef(false);
 
-    const getMorePhotos = async () => {
-      if (hasNextPage && !loadingPhotos && currentIndex > -1 && selectedPicker === 'images') {
+    const getMorePhotos = useCallback(async () => {
+      if (
+        hasNextPageRef.current &&
+        !loadingPhotos &&
+        currentIndex > -1 &&
+        selectedPicker === 'images'
+      ) {
+        setPhotoError(false);
         setLoadingPhotos(true);
+        const endCursor = endCursorRef.current;
         try {
           const results = await getPhotos({
             after: endCursor,
             first: numberOfAttachmentImagesToLoadPerCall ?? 60,
           });
-          if (endCursor) {
-            setPhotos([...photos, ...results.assets]);
-          } else {
-            setPhotos(results.assets);
-          }
-          setEndCursor(results.endCursor);
-          setHasNextPage(results.hasNextPage || false);
+          endCursorRef.current = results.endCursor;
+          setPhotos((prevPhotos) =>
+            endCursor ? [...prevPhotos, ...results.assets] : results.assets,
+          );
+          hasNextPageRef.current = !!results.hasNextPage;
         } catch (error) {
-          console.log(error);
           setPhotoError(true);
         }
         setLoadingPhotos(false);
       }
-    };
+    }, [currentIndex, selectedPicker, loadingPhotos]);
 
     useEffect(() => {
       const backAction = () => {
@@ -381,27 +143,11 @@ export const AttachmentPicker = React.forwardRef(
       const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
 
       return () => backHandler.remove();
-    }, [selectedPicker]);
+    }, [selectedPicker, closePicker]);
 
     useEffect(() => {
-      const hideAttachmentPicker = () => {
-        if (bottomSheetCloseOnKeyboardShowTimeout.current) {
-          clearTimeout(bottomSheetCloseOnKeyboardShowTimeout.current);
-        }
-        setSelectedPicker(undefined);
-        // This short timeout is to prevent a race condition
-        // where the close function is called during the point when a internal container layout happens within the bottomsheet due to keyboard affecting the layout
-        // If the container layout measures a shorter height than previous but if the close snapped to the previous height's position, the bottom sheet will show up
-        // this short delay ensures that close function is always called after a container layout due to keyboard change
-        bottomSheetCloseOnKeyboardShowTimeout.current = setTimeout(
-          () => (ref as React.MutableRefObject<BottomSheet | undefined>).current?.close(),
-          150,
-        );
-      };
-      const keyboardSubscription =
-        Platform.OS === 'ios'
-          ? Keyboard.addListener('keyboardWillShow', hideAttachmentPicker)
-          : Keyboard.addListener('keyboardDidShow', hideAttachmentPicker);
+      const keyboardShowEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+      const keyboardSubscription = Keyboard.addListener(keyboardShowEvent, closePicker);
 
       return () => {
         if (keyboardSubscription?.remove) {
@@ -410,38 +156,35 @@ export const AttachmentPicker = React.forwardRef(
         }
 
         // To keep compatibility with older versions of React Native, where `remove()` is not available
-        if (Platform.OS === 'ios') {
-          Keyboard.removeListener('keyboardWillShow', hideAttachmentPicker);
-        } else {
-          Keyboard.removeListener('keyboardDidShow', hideAttachmentPicker);
-        }
-        if (bottomSheetCloseOnKeyboardShowTimeout.current) {
-          clearTimeout(bottomSheetCloseOnKeyboardShowTimeout.current);
-        }
+        Keyboard.removeListener(keyboardShowEvent, closePicker);
       };
-    }, []);
+    }, [closePicker]);
 
     useEffect(() => {
       if (currentIndex < 0) {
         setSelectedPicker(undefined);
         if (!loadingPhotos) {
-          setEndCursor(undefined);
-          setHasNextPage(true);
+          endCursorRef.current = undefined;
+          hasNextPageRef.current = true;
+          attemptedToLoadPhotosOnOpenRef.current = false;
+          setPhotoError(false);
         }
       }
-    }, [currentIndex]);
+    }, [currentIndex, loadingPhotos]);
 
     useEffect(() => {
       if (
+        !attemptedToLoadPhotosOnOpenRef.current &&
         selectedPicker === 'images' &&
-        endCursor === undefined &&
+        endCursorRef.current === undefined &&
         currentIndex > -1 &&
         !loadingPhotos
       ) {
-        setPhotoError(false);
         getMorePhotos();
+        // we do this only once on open for avoiding to request permissions in rationale dialog again and again on Android
+        attemptedToLoadPhotosOnOpenRef.current = true;
       }
-    }, [currentIndex, selectedPicker]);
+    }, [currentIndex, selectedPicker, getMorePhotos, loadingPhotos]);
 
     const selectedPhotos = photos.map((asset) => ({
       asset,
@@ -464,29 +207,43 @@ export const AttachmentPicker = React.forwardRef(
      * dimensions for screen and window, it is incorrect and we need to account for
      * this. If you use a translucent header bar more adjustments are needed.
      */
-    const statusBarHeight = StatusBar.currentHeight ?? 0;
-    const bottomBarHeight = fullScreenHeight - screenHeight - statusBarHeight;
-    const androidBottomBarHeightAdjustment =
-      Platform.OS === 'android'
-        ? bottomBarHeight === statusBarHeight
-          ? translucentStatusBar
-            ? 0
-            : StatusBar.currentHeight ?? 0
-          : translucentStatusBar
-          ? bottomBarHeight > statusBarHeight
-            ? -bottomBarHeight + statusBarHeight
-            : bottomBarHeight > 0
-            ? -statusBarHeight
-            : 0
-          : bottomBarHeight > 0
-          ? 0
-          : statusBarHeight
-        : 0;
+    const getAndroidBottomBarHeightAdjustment = (): number => {
+      if (Platform.OS === 'android') {
+        const statusBarHeight = StatusBar.currentHeight ?? 0;
+        const bottomBarHeight = fullScreenHeight - screenHeight - statusBarHeight;
+        if (bottomBarHeight === statusBarHeight) {
+          return translucentStatusBar ? 0 : statusBarHeight;
+        } else {
+          if (translucentStatusBar) {
+            if (bottomBarHeight > statusBarHeight) {
+              return -bottomBarHeight + statusBarHeight;
+            } else {
+              return bottomBarHeight > 0 ? -statusBarHeight : 0;
+            }
+          } else {
+            return bottomBarHeight > 0 ? 0 : statusBarHeight;
+          }
+        }
+      }
+      return 0;
+    };
+
+    const getInitialSnapPoint = (): number => {
+      if (attachmentPickerBottomSheetHeight !== undefined) {
+        return attachmentPickerBottomSheetHeight;
+      }
+      if (Platform.OS === 'android') {
+        return (
+          308 +
+          (fullScreenHeight - screenHeight + getAndroidBottomBarHeightAdjustment()) -
+          handleHeight
+        );
+      } else {
+        return 308 + (fullScreenHeight - screenHeight);
+      }
+    };
 
-    const initialSnapPoint =
-      attachmentPickerBottomSheetHeight ?? Platform.OS === 'android'
-        ? 308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment) - handleHeight
-        : 308 + (fullScreenHeight - screenHeight + androidBottomBarHeightAdjustment);
+    const initialSnapPoint = getInitialSnapPoint();
 
     const finalSnapPoint =
       Platform.OS === 'android'
@@ -531,12 +288,12 @@ export const AttachmentPicker = React.forwardRef(
             keyExtractor={(item) => item.asset.uri}
             numColumns={numberOfAttachmentPickerImageColumns ?? 3}
             onEndReached={getMorePhotos}
-            renderItem={renderItem}
+            renderItem={renderAttachmentPickerItem}
           />
         </BottomSheet>
         {selectedPicker === 'images' && photoError && (
           <AttachmentPickerError
-            attachmentPickerBottomSheetHeight={attachmentPickerBottomSheetHeight}
+            attachmentPickerBottomSheetHeight={initialSnapPoint}
             attachmentPickerErrorButtonText={attachmentPickerErrorButtonText}
             AttachmentPickerErrorImage={AttachmentPickerErrorImage}
             attachmentPickerErrorText={attachmentPickerErrorText}