stream-chat-react-native 5.40.0-rc.2 → 5.41.0-beta.1

package/README.md

@@ -7,10 +7,11 @@
 > The official React Native and Expo components for Stream Chat, a service for
 > building chat applications.
 
+
 [![NPM](https://img.shields.io/npm/v/stream-chat-react-native.svg)](https://www.npmjs.com/package/stream-chat-react-native)
 [![Build Status](https://github.com/GetStream/stream-chat-react-native/actions/workflows/release.yml/badge.svg)](https://github.com/GetStream/stream-chat-react-native/actions)
 [![Component Reference](https://img.shields.io/badge/docs-component%20reference-blue.svg)](https://getstream.io/chat/docs/sdk/reactnative)
-![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-447%20KB-blue)
+![JS Bundle Size](https://img.shields.io/badge/js_bundle_size-451%20KB-blue)
 
 <img align="right" src="https://getstream.imgix.net/images/ios-chat-tutorial/iphone_chat_art@3x.png?auto=format,enhance" width="50%" />
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native",
   "description": "The official React Native SDK for Stream Chat, a service for building chat applications",
-  "version": "5.40.0-rc.2",
+  "version": "5.41.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -11,20 +11,22 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "es6-symbol": "^3.1.3",
-    "stream-chat-react-native-core": "5.40.0-rc.2"
+    "stream-chat-react-native-core": "5.41.0-beta.1"
   },
   "peerDependencies": {
-    "@bam.tech/react-native-image-resizer": ">=3.0.10",
-    "@react-native-camera-roll/camera-roll": ">=7.8.0",
-    "@react-native-clipboard/clipboard": ">=1.14.1",
-    "@stream-io/flat-list-mvcp": ">=0.10.3",
-    "react-native": ">=0.67.0",
+    "@react-native-camera-roll/camera-roll": ">=5.0.0",
+    "@react-native-clipboard/clipboard": "^1.11.1",
+    "@react-native-community/netinfo": ">=2.0.7",
+    "@stream-io/flat-list-mvcp": "^0.10.3",
+    "react-native": ">=0.60.0",
     "react-native-audio-recorder-player": ">=3.6.4",
-    "react-native-blob-util": ">=0.19.9",
-    "react-native-document-picker": ">=9.3.0",
-    "react-native-haptic-feedback": ">=2.2.0",
+    "react-native-document-picker": ">=9.0.1",
+    "react-native-fs": ">=2.16.6",
+    "react-native-haptic-feedback": ">=1.11.0",
     "react-native-image-picker": ">=7.1.2",
-    "react-native-share": ">=10.2.1",
+    "react-native-image-crop-picker": ">=0.33.2",
+    "react-native-image-resizer": ">=1.4.2",
+    "react-native-share": ">=4.1.0",
     "react-native-video": ">=6.4.2"
   },
   "peerDependenciesMeta": {
@@ -34,9 +36,6 @@
     "@react-native-clipboard/clipboard": {
       "optional": true
     },
-    "@stream-io/flat-list-mvcp": {
-      "optional": true
-    },
     "react-native-share": {
       "optional": true
     },
@@ -49,13 +48,13 @@
     "react-native-image-picker": {
       "optional": true
     },
-    "react-native-audio-recorder-player": {
+    "react-native-image-crop-picker": {
       "optional": true
     },
-    "react-native-video": {
+    "react-native-audio-recorder-player": {
       "optional": true
     },
-    "react-native-blob-util": {
+    "react-native-video": {
       "optional": true
     }
   },
@@ -64,7 +63,10 @@
     "postpack": "rm README.md"
   },
   "devDependencies": {
-    "@bam.tech/react-native-image-resizer": ">=3.0.10",
-    "react-native": ">=0.67.0"
+    "@react-native-community/netinfo": ">=2.0.7",
+    "@stream-io/flat-list-mvcp": "0.10.3",
+    "react-native": ">=0.60.0",
+    "react-native-fs": ">=2.16.6",
+    "react-native-image-resizer": ">=1.4.2"
   }
 }

package/src/handlers/NetInfo.ts

@@ -0,0 +1,43 @@
+import { NetInfoState, default as OriginalNetInfo } from '@react-native-community/netinfo';
+
+export const NetInfo = {
+  addEventListener(listener) {
+    let unsubscribe;
+    // For NetInfo >= 3.x.x
+    if (OriginalNetInfo.fetch && typeof OriginalNetInfo.fetch === 'function') {
+      unsubscribe = OriginalNetInfo.addEventListener(({ isConnected, isInternetReachable }) => {
+        // Initialize with truthy value when internetReachable is still loading
+        // if it resolves to false, listener is triggered with false value and network
+        // status is updated
+        listener(isInternetReachable === null ? isConnected : isConnected && isInternetReachable);
+      });
+      return unsubscribe;
+    } else {
+      // For NetInfo < 3.x.x
+      unsubscribe = OriginalNetInfo.addEventListener('connectionChange', () => {
+        // @ts-ignore
+        OriginalNetInfo.isConnected.fetch().then((isConnected: NetInfoState) => {
+          listener(isConnected);
+        });
+      });
+
+      return unsubscribe.remove;
+    }
+  },
+  fetch() {
+    return new Promise((resolve, reject) => {
+      // For NetInfo >= 3.x.x
+      if (OriginalNetInfo.fetch && typeof OriginalNetInfo.fetch === 'function') {
+        OriginalNetInfo.fetch().then(({ isConnected }) => {
+          resolve(isConnected);
+        }, reject);
+      } else {
+        // For NetInfo < 3.x.x
+        // @ts-ignore
+        OriginalNetInfo.isConnected.fetch().then((isConnected: NetInfoState) => {
+          resolve(isConnected);
+        }, reject);
+      }
+    });
+  },
+};

package/src/{optionalDependencies → handlers}/Sound.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import AudioVideoPlayer from './AudioVideo';
+import AudioVideoPlayer from '../optionalDependencies/Video';
 
 export const Sound = {
   initializeSound: null,

package/src/{optionalDependencies → handlers}/Video.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import AudioVideoPlayer from './AudioVideo';
 
+import AudioVideoPlayer from '../optionalDependencies/Video';
 export const Video = AudioVideoPlayer
   ? ({ onBuffer, onEnd, onLoad, onProgress, paused, repeat, resizeMode, style, uri, videoRef }) => (
       <AudioVideoPlayer

package/src/handlers/compressImage.ts

@@ -1,5 +1,5 @@
 // @ts-ignore this module does not have a type declaration
-import ImageResizer from '@bam.tech/react-native-image-resizer';
+import ImageResizer from 'react-native-image-resizer';
 
 type CompressImageParams = {
   compressImageQuality: number;

package/src/handlers/deleteFile.ts

@@ -0,0 +1,11 @@
+import RNFS from 'react-native-fs';
+
+export const deleteFile = async ({ uri }: { uri: string }) => {
+  try {
+    await RNFS.unlink(uri);
+    return true;
+  } catch (error) {
+    console.log('File deletion failed...');
+    return false;
+  }
+};

package/src/handlers/index.ts

@@ -1 +1,6 @@
+export * from './deleteFile';
 export * from './compressImage';
+export * from './NetInfo';
+export * from './saveFile';
+export * from './Sound';
+export * from './Video';

package/src/handlers/saveFile.ts

@@ -0,0 +1,11 @@
+import RNFS from 'react-native-fs';
+
+export const saveFile = async ({ fileName, fromUrl }: { fileName: string; fromUrl: string }) => {
+  try {
+    const path = RNFS.CachesDirectoryPath + '/' + encodeURIComponent(fileName);
+    await RNFS.downloadFile({ fromUrl, toFile: path }).promise;
+    return 'file://' + path;
+  } catch (error) {
+    throw new Error('Downloading image failed...');
+  }
+};

package/src/index.js

@@ -1,26 +1,22 @@
 import { Platform } from 'react-native';
 
+import { FlatList } from '@stream-io/flat-list-mvcp';
 import { registerNativeHandlers } from 'stream-chat-react-native-core';
 
-import { compressImage } from './handlers';
+import { compressImage, deleteFile, NetInfo, saveFile, Sound, Video } from './handlers';
 
 import {
   Audio,
-  deleteFile,
-  FlatList,
   getLocalAssetUri,
   getPhotos,
   iOS14RefreshGallerySelection,
   oniOS14GalleryLibrarySelectionChange,
   pickDocument,
   pickImage,
-  saveFile,
   setClipboardString,
   shareImage,
-  Sound,
   takePhoto,
   triggerHaptic,
-  Video,
 } from './optionalDependencies';
 
 registerNativeHandlers({
@@ -31,6 +27,7 @@ registerNativeHandlers({
   getLocalAssetUri,
   getPhotos,
   iOS14RefreshGallerySelection,
+  NetInfo,
   oniOS14GalleryLibrarySelectionChange,
   pickDocument,
   pickImage,

package/src/optionalDependencies/Audio.ts

@@ -1,15 +1,8 @@
 import { PermissionsAndroid, Platform } from 'react-native';
+import RNFS from 'react-native-fs';
 let AudioRecorderPackage;
 let audioRecorderPlayer;
 
-let RNBlobUtil;
-
-try {
-  RNBlobUtil = require('react-native-blob-util').default;
-} catch (e) {
-  console.log('react-native-blob-util is not installed');
-}
-
 try {
   AudioRecorderPackage = require('react-native-audio-recorder-player').default;
   audioRecorderPlayer = new AudioRecorderPackage();
@@ -204,7 +197,7 @@ class _Audio {
     }
     try {
       const path = Platform.select({
-        android: `${RNBlobUtil.fs.dirs.CacheDir}/sound.aac`,
+        android: `${RNFS.CachesDirectoryPath}/sound.aac`,
         ios: 'sound.aac',
       });
       const audioSet = {
@@ -256,4 +249,4 @@ class _Audio {
   };
 }
 
-export const Audio = AudioRecorderPackage && RNBlobUtil ? new _Audio() : null;
+export const Audio = AudioRecorderPackage ? new _Audio() : null;

package/src/optionalDependencies/getLocalAssetUri.ts

@@ -5,7 +5,7 @@ try {
 } catch (e) {
   // do nothing
   console.log(
-    '@react-native-camera-roll/camera-roll is not installed. Please install it or you can choose to install react-native-image-picker for native image picker.',
+    '@react-native-camera-roll/camera-roll is not installed. Please install it or you can choose to install react-native-image-crop-picker for native image picker.',
   );
 }
 

package/src/optionalDependencies/getPhotos.ts

@@ -7,7 +7,7 @@ try {
 } catch (e) {
   // do nothing
   console.log(
-    '@react-native-camera-roll/camera-roll is not installed. Please install it or you can choose to install react-native-image-picker for native image picker.',
+    '@react-native-camera-roll/camera-roll is not installed. Please install it or you can choose to install react-native-image-crop-picker for native image picker.',
   );
 }
 

package/src/optionalDependencies/iOS14RefreshGallerySelection.ts

@@ -7,7 +7,7 @@ try {
 } catch (e) {
   // do nothing
   console.log(
-    '@react-native-camera-roll/camera-roll is not installed. Please install it or you can choose to install react-native-image-picker for native image picker.',
+    '@react-native-camera-roll/camera-roll is not installed. Please install it or you can choose to install react-native-image-crop-picker for native image picker.',
   );
 }
 

package/src/optionalDependencies/index.ts

@@ -1,16 +1,12 @@
 export * from './Audio';
-export * from './deleteFile';
-export * from './FlatList';
+export * from './shareImage';
+export * from './Video';
+export * from './triggerHaptic';
+export * from './setClipboardString';
+export * from './pickDocument';
 export * from './getLocalAssetUri';
-export * from './getPhotos';
 export * from './iOS14RefreshGallerySelection';
 export * from './oniOS14GalleryLibrarySelectionChange';
-export * from './pickDocument';
+export * from './getPhotos';
 export * from './pickImage';
-export * from './saveFile';
-export * from './setClipboardString';
-export * from './shareImage';
-export * from './Sound';
 export * from './takePhoto';
-export * from './triggerHaptic';
-export * from './Video';

package/src/optionalDependencies/oniOS14GalleryLibrarySelectionChange.ts

@@ -7,7 +7,7 @@ try {
 } catch (e) {
   // do nothing
   console.log(
-    '@react-native-camera-roll/camera-roll is not installed. Please install it or you can choose to install react-native-image-picker for native image picker.',
+    '@react-native-camera-roll/camera-roll is not installed. Please install it or you can choose to install react-native-image-crop-picker for native image picker.',
   );
 }
 

package/src/optionalDependencies/shareImage.ts

@@ -1,4 +1,5 @@
 import { Platform } from 'react-native';
+import RNFS from 'react-native-fs';
 
 let RNShare;
 
@@ -8,18 +9,10 @@ try {
   console.log('react-native-share is not installed');
 }
 
-let RNBlobUtil;
-
-try {
-  RNBlobUtil = require('react-native-blob-util').default;
-} catch (e) {
-  console.log('react-native-blob-util is not installed');
-}
-
 export const shareImage = RNShare
   ? async ({ type, url }) => {
       try {
-        const base64Image = await RNBlobUtil.fs.readFile(url, 'base64');
+        const base64Image = await RNFS.readFile(url, 'base64');
         const base64Url = `data:${type};base64,${base64Image}`;
         await RNShare.open({
           activityItemSources:
@@ -42,6 +35,9 @@ export const shareImage = RNShare
                   },
                 ]
               : undefined,
+          // react-native-share has a typing issue, where their docs confirm that
+          // this property should be an array of strings, but the type is a string
+          // in the @types/react-native-share package.
           excludedActivityTypes: [] as unknown as string,
           failOnCancel: false,
           type,
@@ -49,7 +45,7 @@ export const shareImage = RNShare
         });
         return true;
       } catch (error) {
-        console.warn('Sharing failed...', error);
+        console.warn('Sharing failed...');
       }
     }
   : null;

package/src/optionalDependencies/takePhoto.ts

@@ -3,11 +3,9 @@ import { AppState, Image, PermissionsAndroid, Platform } from 'react-native';
 let ImagePicker;
 
 try {
-  ImagePicker = require('react-native-image-picker');
+  ImagePicker = require('react-native-image-crop-picker').default;
 } catch (e) {
-  console.log(
-    'The package react-native-image-picker is not installed. Please install the same so as to take photo through camera and upload it.',
-  );
+  console.log('react-native-image-crop-picker is not installed');
 }
 
 export const takePhoto = ImagePicker
@@ -28,22 +26,20 @@ export const takePhoto = ImagePicker
         }
       }
       try {
-        const result = await ImagePicker.launchCamera({
-          quality: Math.min(Math.max(0, compressImageQuality), 1),
+        const photo = await ImagePicker.openCamera({
+          compressImageQuality: Math.min(Math.max(0, compressImageQuality), 1),
         });
-        if (!result.assets.length) {
-          return {
-            cancelled: true,
-          };
-        }
-        const photo = result.assets[0];
-        if (photo.height && photo.width && photo.uri) {
+        if (photo.height && photo.width && photo.path) {
           let size: { height?: number; width?: number } = {};
           if (Platform.OS === 'android') {
             // Height and width returned by ImagePicker are incorrect on Android.
+            // The issue is described in following github issue:
+            // https://github.com/ivpusic/react-native-image-crop-picker/issues/901
+            // This we can't rely on them as it is, and we need to use Image.getSize
+            // to get accurate size.
             const getSize = (): Promise<{ height: number; width: number }> =>
               new Promise((resolve) => {
-                Image.getSize(photo.uri, (width, height) => {
+                Image.getSize(photo.path, (width, height) => {
                   resolve({ height, width });
                 });
               });
@@ -66,7 +62,7 @@ export const takePhoto = ImagePicker
             cancelled: false,
             size: photo.size,
             source: 'camera',
-            uri: photo.uri,
+            uri: photo.path,
             ...size,
           };
         }

package/src/optionalDependencies/FlatList.ts

@@ -1,21 +0,0 @@
-import { FlatList as DefaultFlatList, Platform } from 'react-native';
-let FlatList;
-
-
-if (Platform.constants.reactNativeVersion.minor < 72) {
-  const upgradeLog =
-  "'@stream-io/flat-list-mvcp' is deprecated, please upgrade your react-native version to >0.71 to get same the benefits on the default FlatList and uninstall the package.";
-  try {
-    FlatList = require('@stream-io/flat-list-mvcp').FlatList;
-    console.log(upgradeLog);
-  } catch (error) {
-    console.log(
-      `@stream-io/flat-list-mvcp not found, using react-native's FlatList. This library is used to achieve bi-directional infinite scrolling on lower react native versions. ${upgradeLog}`,
-    );
-    FlatList = require('react-native').FlatList;
-  }
-} else {
-  FlatList = DefaultFlatList;
-}
-
-export { FlatList };

package/src/optionalDependencies/deleteFile.ts

@@ -1,19 +0,0 @@
-let RNBlobUtil;
-
-try {
-  RNBlobUtil = require('react-native-blob-util').default;
-} catch (e) {
-  console.log('react-native-blob-util is not installed');
-}
-
-export const deleteFile = RNBlobUtil
-  ? async ({ uri }) => {
-      try {
-        await RNBlobUtil.fs.unlink(uri);
-        return true;
-      } catch (error) {
-        console.log('File deletion failed...', error);
-        return false;
-      }
-    }
-  : null;

package/src/optionalDependencies/saveFile.ts

@@ -1,24 +0,0 @@
-let RNBlobUtil;
-
-try {
-  RNBlobUtil = require('react-native-blob-util').default;
-} catch (e) {
-  console.log('react-native-blob-util is not installed');
-}
-
-export const saveFile = RNBlobUtil
-  ? async ({ fileName, fromUrl }) => {
-      try {
-        const path = RNBlobUtil.fs.dirs.CacheDir + '/' + encodeURIComponent(fileName);
-        await RNBlobUtil.config({
-          fileCache: true,
-          path,
-        }).fetch('GET', fromUrl);
-
-        return path;
-      } catch (error) {
-        console.log('Downloading image failed...', error);
-        throw new Error('Downloading image failed...');
-      }
-    }
-  : null;