Merge pull request #2492 from GetStream/develop

Next Release
GetStream · Apr 23, 2024 · 602b54b · 602b54b
2 parents 8b79f5b + 1f3751a
commit 602b54b
Show file tree

Hide file tree

Showing 32 changed files with 334 additions and 289 deletions.
diff --git a/docusaurus/docs/reactnative/basics/troubleshooting.mdx b/docusaurus/docs/reactnative/basics/troubleshooting.mdx
@@ -107,8 +107,26 @@ Both `bottomInset` & `topInset` can be set via the appropriate functions, `setBo
 
 ### Android
 
-On Android if the StatusBar is set to translucent, that is `StatusBar.setTranslucent(true)`, you need to provide the prop `translucentStatusBar` to the `OverlayProvider`.
-This prop is a `boolean` that adjusts for differences in the measurements of the screen height when the StatusBar on Android is translucent.
+On Android if the StatusBar is set to translucent, that is `StatusBar.setTranslucent(true)`, you should add the height adjustments using the `setTopInset` function of the `useAttachmentPickerContext` hook.
+
+```tsx
+import { StatusBar } from 'react-native';
+import { useHeaderHeight } from '@react-navigation/elements';
+import { useAttachmentPickerContext } from 'stream-chat-react-native';
+const headerHeight = useHeaderHeight();
+const { setTopInset } = useAttachmentPickerContext();
+
+// When the status bar is translucent, the headerHeight contains the actual header height + the status bar height which needs to be substracted.
+const finalHeaderHeight =
+  headerHeight - (Platform.OS === 'android' && StatusBar.currentHeight ? StatusBar.currentHeight : 0);
+
+useEffect(() => {
+  setTopInset(finalHeaderHeight);
+}, [setTopInset, finalHeaderHeight]);
+```
+
+This can also be passed to the `topInset` prop of of `OverlayProvider`.
+
 It is important to note that since Expo 38 `true` is the default for transparent on Android.
 
 ## Image picker not working

diff --git a/.../ui-components/overlay-provider/props/attachment_picker_bottom_sheet_height.mdx b/.../ui-components/overlay-provider/props/attachment_picker_bottom_sheet_height.mdx
@@ -1,5 +1,5 @@
-Height of the image picker bottom sheet when closed.
+Height of the image picker bottom sheet when opened.
 
-| Type   | Default |
-| ------ | ------- |
-| number | 308     |
+| Type   | Default              |
+| ------ | -------------------- |
+| Number | 40% of Window Height |
diff --git a/...ontent/ui-components/overlay-provider/props/attachment_selection_bar_height.mdx b/...ontent/ui-components/overlay-provider/props/attachment_selection_bar_height.mdx
@@ -1,4 +1,4 @@
-Height of the attachment selection bar displayed above the image picker.
+Height of the attachment selection bar displayed on the attachment picker.
 
 | Type   | Default |
 | ------ | ------- |

diff --git a/docusaurus/docs/reactnative/contexts/overlay-context.mdx b/docusaurus/docs/reactnative/contexts/overlay-context.mdx
@@ -46,5 +46,3 @@ Current active overlay. Overlay gets rendered in following cases
 <SetOverlay />
 
 <!-- ### style -->
-
-<!-- ### translucentStatusBar -->
diff --git a/docusaurus/docs/reactnative/core-components/overlay-provider.mdx b/docusaurus/docs/reactnative/core-components/overlay-provider.mdx
@@ -51,11 +51,11 @@ Height of the image picker bottom sheet handle.
 
 ### `attachmentPickerBottomSheetHeight`
 
-Height of the image picker bottom sheet when closed.
+Height of the image picker bottom sheet when opened.
 
-| Type   | Default |
-| ------ | ------- |
-| Number | 308     |
+| Type   | Default              |
+| ------ | -------------------- |
+| Number | 40% of Window Height |
 
 ### `attachmentPickerErrorButtonText`
 
@@ -75,7 +75,7 @@ Error text for [`AttachmentPickerError`](https://github.com/GetStream/stream-ch
 
 ### `attachmentSelectionBarHeight`
 
-Height of the attachment selection bar displayed above the image picker.
+Height of the attachment selection bar displayed on the attachment picker.
 
 | Type   | Default |
 | ------ | ------- |
@@ -250,6 +250,14 @@ Component to render select more photos option for selected gallery access in iOS
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | ComponentType | `undefined` \| [`AttachmentPickerIOSSelectMorePhotos`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerIOSSelectMorePhotos.tsx) |
 
+### `AttachmentPickerSelectionBar`
+
+Component to render and customize the attachment picker selection bar that displays the image, file and camera icons.\_createMdxContent
+
+| Type          | Default                                                                                                                                                                                                 |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | `undefined` \| [`AttachmentPickerSelectionBar`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx) |
+
 ### `CameraSelectorIcon`
 
 Camera selector component displayed in the attachment selector bar.

diff --git a/package/native-package/src/handlers/getPhotos.ts b/package/native-package/src/handlers/getPhotos.ts
@@ -12,7 +12,7 @@ type ReturnType = {
 
 const verifyAndroidPermissions = async () => {
   const isRN71orAbove = Platform.constants.reactNativeVersion?.minor >= 71;
-  const isAndroid13orAbove = Platform.Version >= 33;
+  const isAndroid13orAbove = (Platform.Version as number) >= 33;
   const shouldCheckForMediaPermissions = isRN71orAbove && isAndroid13orAbove;
   const getCheckPermissionPromise = () => {
     if (shouldCheckForMediaPermissions) {

diff --git a/package/src/components/AttachmentPicker/AttachmentPicker.tsx b/package/src/components/AttachmentPicker/AttachmentPicker.tsx
@@ -1,17 +1,20 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { BackHandler, Dimensions, Keyboard, Platform, StatusBar, StyleSheet } from 'react-native';
+import { BackHandler, Keyboard, Platform, StyleSheet } from 'react-native';
 
-import BottomSheet, { BottomSheetFlatList, BottomSheetHandleProps } from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetFlatList } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
 import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
 
 import { renderAttachmentPickerItem } from './components/AttachmentPickerItem';
 
-import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import {
+  AttachmentPickerContextValue,
+  useAttachmentPickerContext,
+} from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { useViewport } from '../../hooks/useViewport';
+import { useScreenDimensions } from '../../hooks/useScreenDimensions';
 import { getPhotos, oniOS14GalleryLibrarySelectionChange } from '../../native';
 import type { Asset } from '../../types/types';
 
@@ -23,15 +26,13 @@ const styles = StyleSheet.create({
   },
 });
 
-const fullScreenHeight = Dimensions.get('window').height;
-
-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.
-   *
-   * **Default** [AttachmentPickerBottomSheetHandle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx)
-   */
-  AttachmentPickerBottomSheetHandle: React.FC<BottomSheetHandleProps>;
+export type AttachmentPickerProps = Pick<
+  AttachmentPickerContextValue,
+  | 'AttachmentPickerBottomSheetHandle'
+  | 'attachmentPickerBottomSheetHandleHeight'
+  | 'attachmentSelectionBarHeight'
+  | 'attachmentPickerBottomSheetHeight'
+> & {
   /**
    * Custom UI component to render error component while opening attachment picker.
    *
@@ -54,13 +55,10 @@ export type AttachmentPickerProps = {
    * **Default** [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
    */
   ImageOverlaySelectedComponent: React.ComponentType;
-  attachmentPickerBottomSheetHandleHeight?: number;
-  attachmentPickerBottomSheetHeight?: number;
   attachmentPickerErrorButtonText?: string;
   attachmentPickerErrorText?: string;
   numberOfAttachmentImagesToLoadPerCall?: number;
   numberOfAttachmentPickerImageColumns?: number;
-  translucentStatusBar?: boolean;
 };
 
 export const AttachmentPicker = React.forwardRef(
@@ -77,7 +75,6 @@ export const AttachmentPicker = React.forwardRef(
       ImageOverlaySelectedComponent,
       numberOfAttachmentImagesToLoadPerCall,
       numberOfAttachmentPickerImageColumns,
-      translucentStatusBar,
     } = props;
 
     const {
@@ -97,9 +94,9 @@ export const AttachmentPicker = React.forwardRef(
       setSelectedPicker,
       topInset,
     } = useAttachmentPickerContext();
-    const { vh } = useViewport();
+    const { vh: screenVh } = useScreenDimensions();
 
-    const screenHeight = vh(100);
+    const fullScreenHeight = screenVh(100);
 
     const [currentIndex, setCurrentIndex] = useState(-1);
     const endCursorRef = useRef<string>();
@@ -239,63 +236,18 @@ export const AttachmentPicker = React.forwardRef(
       setSelectedImages,
     }));
 
-    const handleHeight = attachmentPickerBottomSheetHandleHeight || 20;
-
-    /**
-     * This is to handle issues with Android measurements coming back incorrect.
-     * If the StatusBar height is perfectly 1/2 of the difference between the two
-     * 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 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 handleHeight = attachmentPickerBottomSheetHandleHeight;
 
-    const initialSnapPoint = getInitialSnapPoint();
+    const initialSnapPoint = attachmentPickerBottomSheetHeight;
 
-    const finalSnapPoint =
-      Platform.OS === 'android'
-        ? fullScreenHeight - topInset - handleHeight
-        : fullScreenHeight - topInset;
+    const finalSnapPoint = fullScreenHeight - topInset;
 
     /**
      * Snap points changing cause a rerender of the position,
      * this is an issue if you are calling close on the bottom sheet.
      */
     const snapPoints = useMemo(
-      () => [Math.max(0, initialSnapPoint), Math.max(0, finalSnapPoint)],
+      () => [initialSnapPoint, finalSnapPoint],
       [initialSnapPoint, finalSnapPoint],
     );
 
@@ -334,7 +286,7 @@ export const AttachmentPicker = React.forwardRef(
         </BottomSheet>
         {selectedPicker === 'images' && photoError && (
           <AttachmentPickerError
-            attachmentPickerBottomSheetHeight={initialSnapPoint}
+            attachmentPickerBottomSheetHeight={attachmentPickerBottomSheetHeight}
             attachmentPickerErrorButtonText={attachmentPickerErrorButtonText}
             AttachmentPickerErrorImage={AttachmentPickerErrorImage}
             attachmentPickerErrorText={attachmentPickerErrorText}

diff --git a/...ker/components/AttachmentSelectionBar.tsx → ...mponents/AttachmentPickerSelectionBar.tsx b/...ker/components/AttachmentSelectionBar.tsx → ...mponents/AttachmentPickerSelectionBar.tsx
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const AttachmentSelectionBar = () => {
+export const AttachmentPickerSelectionBar = () => {
   const {
     attachmentSelectionBarHeight,
     CameraSelectorIcon,
@@ -75,7 +75,7 @@ export const AttachmentSelectionBar = () => {
   };
 
   return (
-    <View style={[styles.container, container, { height: attachmentSelectionBarHeight ?? 52 }]}>
+    <View style={[styles.container, container, { height: attachmentSelectionBarHeight }]}>
       <TouchableOpacity
         hitSlop={{ bottom: 15, top: 15 }}
         onPress={() => setPicker('images')}

diff --git a/package/src/components/Chat/hooks/handleEventToSyncDB.ts b/package/src/components/Chat/hooks/handleEventToSyncDB.ts
@@ -1,4 +1,3 @@
-import { DefaultStreamChatGenerics } from 'src/types/types';
 import type { Event, StreamChat } from 'stream-chat';
 
 import { deleteChannel } from '../../../store/apis/deleteChannel';
@@ -14,6 +13,7 @@ import { upsertReads } from '../../../store/apis/upsertReads';
 import { QuickSqliteClient } from '../../../store/QuickSqliteClient';
 import { createSelectQuery } from '../../../store/sqlite-utils/createSelectQuery';
 import { PreparedQueries } from '../../../store/types';
+import { DefaultStreamChatGenerics } from '../../../types/types';
 
 export const handleEventToSyncDB = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,5 +46,3 @@ Current active overlay. Overlay gets rendered in following cases
		<SetOverlay />

		<!-- ### style -->

		<!-- ### translucentStatusBar -->