stream-chat-react-native-core 9.0.0-beta.28 → 9.0.0-beta.29

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/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -79,7 +79,7 @@ const AttachmentVideo = (props: AttachmentPickerItemType) => {
         image,
       ]}
     >
-      <Image source={{ uri: thumb_url }} style={StyleSheet.absoluteFillObject} />
+      <Image source={{ uri: thumb_url }} style={StyleSheet.absoluteFill} />
       <View style={[styles.overlay, imageOverlay]}>
         <ImageOverlaySelectedComponent index={selectedIndex} />
       </View>
@@ -138,7 +138,7 @@ const AttachmentImage = (props: AttachmentPickerItemType) => {
         image,
       ]}
     >
-      <Image source={{ uri }} style={StyleSheet.absoluteFillObject} />
+      <Image source={{ uri }} style={StyleSheet.absoluteFill} />
       <View style={[styles.overlay, imageOverlay]}>
         <ImageOverlaySelectedComponent index={selectedIndex} />
       </View>

package/src/components/ChannelList/Skeleton.tsx

@@ -19,7 +19,7 @@ const SkeletonBlock = ({ style }: { style: React.ComponentProps<typeof View>['st
         baseColor={semantics.backgroundCoreSurfaceDefault}
         duration={animationTime}
         gradientColor={semantics.skeletonLoadingHighlight}
-        style={StyleSheet.absoluteFillObject}
+        style={StyleSheet.absoluteFill}
       />
     </View>
   );

package/src/components/ImageGallery/ImageGallery.tsx

@@ -279,11 +279,11 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     <Animated.View
       accessibilityLabel='Image Gallery'
       pointerEvents={'auto'}
-      style={[StyleSheet.absoluteFillObject, showScreenStyle]}
+      style={[StyleSheet.absoluteFill, showScreenStyle]}
     >
-      <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
+      <Animated.View style={[StyleSheet.absoluteFill, containerBackground]} />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
-        <Animated.View style={StyleSheet.absoluteFillObject}>
+        <Animated.View style={StyleSheet.absoluteFill}>
           <Animated.View
             testID='image-gallery-pager'
             style={[styles.animatedContainer, pagerStyle, pager]}

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -66,7 +66,7 @@ export const ImageAttachmentUploadPreview = ({
           onError={onErrorHandler}
           onLoadEnd={onLoadEndHandler}
           source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           testID={'image-attachment-upload-preview-image'}
         />
         {indicatorType === ProgressIndicatorTypes.IN_PROGRESS && <ImageUploadInProgressIndicator />}

package/src/components/Reply/Reply.tsx

@@ -51,7 +51,7 @@ const RightContent = React.memo(
     ) {
       return (
         <View style={[styles.contentWrapper, styles.contentBorder]}>
-          <ImageComponent source={{ uri }} style={StyleSheet.absoluteFillObject} />
+          <ImageComponent source={{ uri }} style={StyleSheet.absoluteFill} />
         </View>
       );
     }
@@ -59,7 +59,7 @@ const RightContent = React.memo(
       return (
         <View style={[styles.contentWrapper, styles.contentBorder]}>
           <View style={styles.attachmentContainer}>
-            <Image source={{ uri: attachment.thumb_url }} style={StyleSheet.absoluteFillObject} />
+            <Image source={{ uri: attachment.thumb_url }} style={StyleSheet.absoluteFill} />
             <VideoPlayIndicator size='sm' />
           </View>
         </View>

package/src/components/ThreadList/ThreadListItemSkeleton.tsx

@@ -19,7 +19,7 @@ const SkeletonBlock = ({ style }: { style: React.ComponentProps<typeof View>['st
         baseColor={semantics.backgroundCoreSurfaceDefault}
         duration={animationTime}
         gradientColor={semantics.skeletonLoadingHighlight}
-        style={StyleSheet.absoluteFillObject}
+        style={StyleSheet.absoluteFill}
       />
     </View>
   );

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -514,8 +514,11 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
     <Modal onRequestClose={onClose} transparent visible={visible}>
       <GestureHandlerRootView style={styles.sheetContentContainer}>
         <View style={[styles.overlay, overlayTheme]}>
-          <Animated.View pointerEvents='none' style={[styles.backdrop, overlayAnimatedStyle]} />
-          <Pressable onPress={onBackdropPress} style={StyleSheet.absoluteFillObject} />
+          <Animated.View
+            pointerEvents='none'
+            style={[StyleSheet.absoluteFill, styles.backdrop, overlayAnimatedStyle]}
+          />
+          <Pressable onPress={onBackdropPress} style={StyleSheet.absoluteFill} />
 
           <Animated.View
             pointerEvents='box-none'
@@ -590,7 +593,6 @@ const useStyles = () => {
           justifyContent: 'flex-end',
         },
         backdrop: {
-          ...StyleSheet.absoluteFillObject,
           backgroundColor: semantics.backgroundCoreScrim,
         },
         sheetContentContainer: {

package/src/contexts/overlayContext/ClosingPortalHostsLayer.tsx

@@ -36,7 +36,7 @@ const ClosingPortalHostSlot = ({
       style={style}
       testID={`closing-portal-host-slot-${hostName}`}
     >
-      <PortalHost name={hostName} style={StyleSheet.absoluteFillObject} />
+      <PortalHost name={hostName} style={styles.absoluteFill} />
     </Animated.View>
   );
 };
@@ -76,3 +76,13 @@ export const ClosingPortalHostsLayer = ({ closeCoverOpacity }: ClosingPortalHost
     </>
   );
 };
+
+const styles = StyleSheet.create({
+  absoluteFill: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -39,11 +39,11 @@ const DefaultMessageOverlayBackground = () => {
   } = useTheme();
 
   return (
-    <View pointerEvents='none' style={StyleSheet.absoluteFillObject}>
+    <View pointerEvents='none' style={StyleSheet.absoluteFill}>
       <View
         pointerEvents='none'
         style={[
-          StyleSheet.absoluteFillObject,
+          StyleSheet.absoluteFill,
           {
             backgroundColor: semantics.badgeBgOverlay,
           },
@@ -320,10 +320,7 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     <GestureDetector gesture={tap}>
       <View pointerEvents='box-none' style={StyleSheet.absoluteFill}>
         {isActive ? (
-          <Animated.View
-            pointerEvents='none'
-            style={[StyleSheet.absoluteFillObject, backdropStyle]}
-          >
+          <Animated.View pointerEvents='none' style={[StyleSheet.absoluteFill, backdropStyle]}>
             <OverlayBackground />
           </Animated.View>
         ) : null}
@@ -332,13 +329,13 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
           {isActive ? (
             <Pressable
               onPress={closeOverlay}
-              style={StyleSheet.absoluteFillObject}
+              style={StyleSheet.absoluteFill}
               testID='message-overlay-backdrop'
             />
           ) : null}
 
           <Animated.View style={[topItemStyle, topItemTranslateStyle]} testID='message-overlay-top'>
-            <PortalHost name='top-item' style={StyleSheet.absoluteFillObject} />
+            <PortalHost name='top-item' style={styles.absoluteFill} />
           </Animated.View>
 
           <Animated.View
@@ -346,14 +343,14 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
             style={hostStyle}
             testID='message-overlay-message'
           >
-            <PortalHost name='message-overlay' style={StyleSheet.absoluteFillObject} />
+            <PortalHost name='message-overlay' style={styles.absoluteFill} />
           </Animated.View>
 
           <Animated.View
             style={[bottomItemStyle, bottomItemTranslateStyle]}
             testID='message-overlay-bottom'
           >
-            <PortalHost name='bottom-item' style={StyleSheet.absoluteFillObject} />
+            <PortalHost name='bottom-item' style={styles.absoluteFill} />
           </Animated.View>
         </View>
 
@@ -362,3 +359,13 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     </GestureDetector>
   );
 };
+
+const styles = StyleSheet.create({
+  absoluteFill: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.0-beta.28"
+  "version": "9.0.0-beta.29"
 }

package/bin/patch-bottom-sheet-5.1.8-pr-2561.js

@@ -1,246 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-
-const TARGET_VERSION_RANGE = {
-  maxExclusive: '5.2.7',
-  minInclusive: '5.1.8',
-};
-
-const FILE_PATCHES = {
-  'src/hooks/useBoundingClientRect.ts': {
-    from: `    // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    if (ref.current.unstable_getBoundingClientRect !== null) {
-      // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
-      const layout = ref.current.unstable_getBoundingClientRect();
-      handler(layout);
-      return;
-    }
-
-    // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable 🤞.
-    if (ref.current.getBoundingClientRect !== null) {
-      // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-      const layout = ref.current.getBoundingClientRect();
-      handler(layout);
-    }`,
-    to: `    if (
-      // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-      ref.current.unstable_getBoundingClientRect !== null &&
-      // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-      typeof ref.current.unstable_getBoundingClientRect === 'function'
-    ) {
-      // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
-      const layout = ref.current.unstable_getBoundingClientRect();
-      handler(layout);
-      return;
-    }
-
-    if (
-      // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-      ref.current.getBoundingClientRect !== null &&
-      // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-      typeof ref.current.getBoundingClientRect === 'function'
-    ) {
-      // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-      const layout = ref.current.getBoundingClientRect();
-      handler(layout);
-    }`,
-  },
-  'lib/module/hooks/useBoundingClientRect.js': {
-    from: `    // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    if (ref.current.unstable_getBoundingClientRect !== null) {
-      // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
-      const layout = ref.current.unstable_getBoundingClientRect();
-      handler(layout);
-      return;
-    }
-
-    // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable 🤞.
-    if (ref.current.getBoundingClientRect !== null) {
-      // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-      const layout = ref.current.getBoundingClientRect();
-      handler(layout);
-    }`,
-    to: `    if (
-    // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    ref.current.unstable_getBoundingClientRect !== null &&
-    // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    typeof ref.current.unstable_getBoundingClientRect === 'function') {
-      // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
-      const layout = ref.current.unstable_getBoundingClientRect();
-      handler(layout);
-      return;
-    }
-
-    if (
-    // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable 🤞.
-    ref.current.getBoundingClientRect !== null &&
-    // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-    typeof ref.current.getBoundingClientRect === 'function') {
-      // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-      const layout = ref.current.getBoundingClientRect();
-      handler(layout);
-    }`,
-  },
-  'lib/commonjs/hooks/useBoundingClientRect.js': {
-    from: `    // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    if (ref.current.unstable_getBoundingClientRect !== null) {
-      // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
-      const layout = ref.current.unstable_getBoundingClientRect();
-      handler(layout);
-      return;
-    }
-
-    // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable 🤞.
-    if (ref.current.getBoundingClientRect !== null) {
-      // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-      const layout = ref.current.getBoundingClientRect();
-      handler(layout);
-    }`,
-    to: `    if (
-    // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    ref.current.unstable_getBoundingClientRect !== null &&
-    // @ts-ignore 👉 https://github.com/facebook/react/commit/53b1f69ba
-    typeof ref.current.unstable_getBoundingClientRect === 'function') {
-      // @ts-ignore https://github.com/facebook/react/commit/53b1f69ba
-      var layout = ref.current.unstable_getBoundingClientRect();
-      handler(layout);
-      return;
-    }
-
-    if (
-    // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable 🤞.
-    ref.current.getBoundingClientRect !== null &&
-    // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-    typeof ref.current.getBoundingClientRect === 'function') {
-      // @ts-ignore once it \`unstable_getBoundingClientRect\` gets stable.
-      var _layout = ref.current.getBoundingClientRect();
-      handler(_layout);
-    }`,
-  },
-};
-
-function resolveBottomSheetPackageDirectory() {
-  try {
-    return path.dirname(require.resolve('@gorhom/bottom-sheet/package.json'));
-  } catch {
-    return undefined;
-  }
-}
-
-function readInstalledVersion(bottomSheetPackageDirectory) {
-  const packageJsonPath = path.join(bottomSheetPackageDirectory, 'package.json');
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
-
-  return packageJson.version;
-}
-
-function parseVersion(version) {
-  const [major = '0', minor = '0', patchWithSuffix = '0'] = version.split('.');
-  const patch = patchWithSuffix.split('-')[0];
-
-  return [major, minor, patch].map((part) => Number.parseInt(part, 10));
-}
-
-function compareVersions(left, right) {
-  const leftParts = parseVersion(left);
-  const rightParts = parseVersion(right);
-
-  for (let index = 0; index < 3; index += 1) {
-    if (leftParts[index] > rightParts[index]) {
-      return 1;
-    }
-
-    if (leftParts[index] < rightParts[index]) {
-      return -1;
-    }
-  }
-
-  return 0;
-}
-
-function shouldPatchVersion(version) {
-  return (
-    compareVersions(version, TARGET_VERSION_RANGE.minInclusive) >= 0 &&
-    compareVersions(version, TARGET_VERSION_RANGE.maxExclusive) < 0
-  );
-}
-
-function patchFile(relativeFilePath, originalContents) {
-  const patch = FILE_PATCHES[relativeFilePath];
-
-  if (!patch) {
-    return {
-      changed: false,
-      contents: originalContents,
-    };
-  }
-
-  const nextContents = originalContents.replace(patch.from, patch.to);
-
-  return {
-    changed: nextContents !== originalContents,
-    contents: nextContents,
-  };
-}
-
-function patchBottomSheet(bottomSheetPackageDirectory) {
-  const installedVersion = readInstalledVersion(bottomSheetPackageDirectory);
-
-  if (!shouldPatchVersion(installedVersion)) {
-    return { changedFilesCount: 0, installedVersion, skipped: true };
-  }
-
-  let changedFilesCount = 0;
-
-  for (const relativeFilePath of Object.keys(FILE_PATCHES)) {
-    const absoluteFilePath = path.join(bottomSheetPackageDirectory, relativeFilePath);
-
-    if (!fs.existsSync(absoluteFilePath)) {
-      continue;
-    }
-
-    const originalContents = fs.readFileSync(absoluteFilePath, 'utf8');
-    const { changed, contents } = patchFile(relativeFilePath, originalContents);
-
-    if (!changed) {
-      continue;
-    }
-
-    fs.writeFileSync(absoluteFilePath, contents);
-    changedFilesCount += 1;
-  }
-
-  return { changedFilesCount, installedVersion, skipped: false };
-}
-
-function run() {
-  const bottomSheetPackageDirectory = resolveBottomSheetPackageDirectory();
-
-  if (!bottomSheetPackageDirectory) {
-    return;
-  }
-
-  const result = patchBottomSheet(bottomSheetPackageDirectory);
-
-  if (result.skipped || result.changedFilesCount === 0) {
-    return;
-  }
-
-  console.log(
-    `[stream-chat-react-native-core] Applied gorhom/react-native-bottom-sheet PR #2561 patch to @gorhom/bottom-sheet@${result.installedVersion}.`,
-  );
-}
-
-if (require.main === module) {
-  run();
-}
-
-module.exports = {
-  FILE_PATCHES,
-  patchFile,
-  run,
-  shouldPatchVersion,
-  TARGET_VERSION_RANGE,
-};