stream-chat-react-native 5.44.2 → 6.0.0-beta.1

package/package.json

@@ -1,32 +1,38 @@
 {
   "name": "stream-chat-react-native",
   "description": "The official React Native SDK for Stream Chat, a service for building chat applications",
-  "version": "5.44.2",
+  "version": "6.0.0-beta.1",
+  "homepage": "https://www.npmjs.com/package/stream-chat-react-native",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
   },
+  "files": [
+    "src",
+    "types",
+    "android",
+    "ios",
+    "*.podspec",
+    "package.json"
+  ],
   "license": "SEE LICENSE IN LICENSE",
   "main": "src/index.js",
   "types": "types/index.d.ts",
   "dependencies": {
     "es6-symbol": "^3.1.3",
-    "stream-chat-react-native-core": "5.44.2"
+    "stream-chat-react-native-core": "6.0.0-beta.1"
   },
   "peerDependencies": {
-    "@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-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-audio-recorder-player": ">=3.6.4",
-    "react-native-document-picker": ">=9.0.1",
-    "react-native-fs": ">=2.16.6",
-    "react-native-haptic-feedback": ">=1.11.0",
+    "react-native-blob-util": ">=0.19.9",
+    "react-native-document-picker": ">=9.3.0",
+    "react-native-haptic-feedback": ">=2.2.0",
     "react-native-image-picker": ">=7.1.2",
-    "react-native-image-crop-picker": ">=0.33.2",
-    "react-native-image-resizer": ">=1.4.2",
-    "react-native-share": ">=4.1.0",
+    "react-native-share": ">=10.2.1",
     "react-native-video": ">=6.4.2"
   },
   "peerDependenciesMeta": {
@@ -36,6 +42,9 @@
     "@react-native-clipboard/clipboard": {
       "optional": true
     },
+    "@stream-io/flat-list-mvcp": {
+      "optional": true
+    },
     "react-native-share": {
       "optional": true
     },
@@ -48,14 +57,14 @@
     "react-native-image-picker": {
       "optional": true
     },
-    "react-native-image-crop-picker": {
-      "optional": true
-    },
     "react-native-audio-recorder-player": {
       "optional": true
     },
     "react-native-video": {
       "optional": true
+    },
+    "react-native-blob-util": {
+      "optional": true
     }
   },
   "scripts": {
@@ -63,10 +72,11 @@
     "postpack": "rm README.md"
   },
   "devDependencies": {
-    "@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"
+    "react-native": ">=0.67.0"
+  },
+  "codegenConfig": {
+    "name": "StreamChatReactNativeSpec",
+    "type": "modules",
+    "jsSrcsDir": "src/native"
   }
 }

package/src/handlers/compressImage.ts

@@ -1,5 +1,4 @@
-// @ts-ignore this module does not have a type declaration
-import ImageResizer from 'react-native-image-resizer';
+import StreamChatReactNative from '../native';
 
 type CompressImageParams = {
   compressImageQuality: number;
@@ -15,7 +14,7 @@ export const compressImage = async ({
   width,
 }: CompressImageParams) => {
   try {
-    const { uri: compressedUri } = await ImageResizer.createResizedImage(
+    const { uri: compressedUri } = await StreamChatReactNative.createResizedImage(
       uri,
       width,
       height,
@@ -28,7 +27,7 @@ export const compressImage = async ({
     );
     return compressedUri;
   } catch (error) {
-    console.log(error);
+    console.log('Error resizing image:', error);
     return uri;
   }
 };

package/src/handlers/index.ts

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

package/src/index.js

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

package/src/native/NativeStreamChatReactNative.ts

@@ -0,0 +1,24 @@
+import type { TurboModule } from 'react-native';
+
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  createResizedImage(
+    uri: string,
+    width: number,
+    height: number,
+    format: string,
+    quality: number,
+    mode: string,
+    onlyScaleDown: boolean,
+    rotation?: number,
+    outputPath?: string | null,
+    keepMeta?: boolean,
+  ): Promise<{
+    base64: string;
+    height: number;
+    name: string;
+  }>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('StreamChatReactNative');

package/src/native/index.tsx

@@ -0,0 +1,48 @@
+import { NativeModules } from 'react-native';
+
+import type { Options, ResizeFormat, Response } from './types';
+export type { ResizeFormat, ResizeMode, Response } from './types';
+
+// @ts-ignore
+// eslint-disable-next-line no-underscore-dangle
+const isTurboModuleEnabled = global.__turboModuleProxy != null;
+
+const ImageResizer = isTurboModuleEnabled
+  ? require('./NativeStreamChatReactNative').default
+  : NativeModules.StreamChatReactNative;
+
+const defaultOptions: Options = {
+  mode: 'contain',
+  onlyScaleDown: false,
+};
+
+async function createResizedImage(
+  uri: string,
+  width: number,
+  height: number,
+  format: ResizeFormat,
+  quality: number,
+  rotation: number = 0,
+  outputPath?: string | null,
+  keepMeta = false,
+  options: Options = defaultOptions,
+): Promise<Response> {
+  const { mode, onlyScaleDown } = { ...defaultOptions, ...options };
+
+  return await ImageResizer.createResizedImage(
+    uri,
+    width,
+    height,
+    format,
+    quality,
+    mode,
+    onlyScaleDown,
+    rotation,
+    outputPath,
+    keepMeta,
+  );
+}
+
+export default {
+  createResizedImage,
+};

package/src/native/types.ts

@@ -0,0 +1,32 @@
+export interface Response {
+  height: number;
+  name: string;
+  path: string;
+  size: number;
+  uri: string;
+  width: number;
+}
+
+export type ResizeFormat = 'PNG' | 'JPEG' | 'WEBP';
+export type ResizeMode = 'contain' | 'cover' | 'stretch';
+
+export type Options = {
+  /**
+   * Either `contain` (the default), `cover`, or `stretch`. Similar to
+   * [react-native <Image>'s resizeMode](https://reactnative.dev/docs/image#resizemode)
+   *
+   * - `contain` will fit the image within `width` and `height`,
+   *   preserving its ratio
+   * - `cover` will make sure at least one dimension fits `width` or
+   *   `height`, and the other is larger, also preserving its ratio.
+   * - `stretch` will resize the image to exactly `width` and `height`.
+   *
+   * (Default: 'contain')
+   */
+  mode?: ResizeMode;
+  /**
+   * Whether to avoid resizing the image to be larger than the original.
+   * (Default: false)
+   */
+  onlyScaleDown?: boolean;
+};

package/src/optionalDependencies/Audio.ts

@@ -1,15 +1,21 @@
 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();
   audioRecorderPlayer.setSubscriptionDuration(Platform.OS === 'android' ? 0.1 : 0.06);
 } catch (e) {
   console.log('react-native-audio-recorder-player is not installed.');
-  console.log(e);
 }
 
 export enum AudioSourceAndroidType {
@@ -197,7 +203,7 @@ class _Audio {
     }
     try {
       const path = Platform.select({
-        android: `${RNFS.CachesDirectoryPath}/sound.aac`,
+        android: `${RNBlobUtil.fs.dirs.CacheDir}/sound.aac`,
         ios: 'sound.aac',
       });
       const audioSet = {
@@ -249,4 +255,4 @@ class _Audio {
   };
 }
 
-export const Audio = AudioRecorderPackage ? new _Audio() : null;
+export const Audio = AudioRecorderPackage && RNBlobUtil ? new _Audio() : null;

package/src/optionalDependencies/FlatList.ts

@@ -0,0 +1,21 @@
+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/{handlers → optionalDependencies}/Sound.tsx

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

package/src/{handlers → optionalDependencies}/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/optionalDependencies/deleteFile.ts

@@ -0,0 +1,19 @@
+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/getLocalAssetUri.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 let CameraRollDependency;
 
 try {
@@ -5,15 +7,18 @@ 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-crop-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-picker for native image picker.',
   );
 }
 
 export const getLocalAssetUri = CameraRollDependency
   ? async (remoteUri: string) => {
       try {
-        const localUri = await CameraRollDependency.CameraRoll.save(remoteUri);
-        return localUri;
+        if (Platform.OS === 'ios') {
+          const imageData = await CameraRollDependency.CameraRoll.iosGetImageDataById(remoteUri);
+          return imageData?.node?.image?.filepath;
+        }
+        return remoteUri;
       } catch {
         throw new Error('getLocalAssetUri Error');
       }

package/src/optionalDependencies/getPhotos.ts

@@ -7,12 +7,14 @@ 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-crop-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-picker for native image picker.',
   );
 }
 
 import type { Asset } from 'stream-chat-react-native-core';
 
+import { getLocalAssetUri } from './getLocalAssetUri';
+
 type ReturnType = {
   assets: Array<Omit<Asset, 'source'> & { source: 'picker' }>;
   endCursor: string | undefined;
@@ -82,15 +84,23 @@ export const getPhotos = CameraRollDependency
           first,
           include: ['fileSize', 'filename', 'imageSize', 'playableDuration'],
         });
-        const assets = results.edges.map((edge) => ({
-          ...edge.node.image,
-          duration: edge.node.image.playableDuration * 1000,
-          // since we include filename, fileSize in the query, we can safely assume it will be defined
-          name: edge.node.image.filename as string,
-          size: edge.node.image.fileSize as number,
-          source: 'picker' as const,
-          type: edge.node.type,
-        }));
+        const assets = await Promise.all(
+          results.edges.map(async (edge) => {
+            const originalUri = edge.node?.image?.uri;
+            const uri = getLocalAssetUri ? await getLocalAssetUri(originalUri) : originalUri;
+            return {
+              ...edge.node.image,
+              duration: edge.node.image.playableDuration * 1000,
+              // since we include filename, fileSize in the query, we can safely assume it will be defined
+              name: edge.node.image.filename as string,
+              originalUri,
+              size: edge.node.image.fileSize as number,
+              source: 'picker' as const,
+              type: edge.node.type,
+              uri,
+            };
+          }),
+        );
         const hasNextPage = results.page_info.has_next_page;
         const endCursor = results.page_info.end_cursor;
         return { assets, endCursor, hasNextPage, iOSLimited: !!results.limited };

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-crop-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-picker for native image picker.',
   );
 }
 

package/src/optionalDependencies/index.ts

@@ -1,12 +1,16 @@
 export * from './Audio';
-export * from './shareImage';
-export * from './Video';
-export * from './triggerHaptic';
-export * from './setClipboardString';
-export * from './pickDocument';
+export * from './deleteFile';
+export * from './FlatList';
 export * from './getLocalAssetUri';
+export * from './getPhotos';
 export * from './iOS14RefreshGallerySelection';
 export * from './oniOS14GalleryLibrarySelectionChange';
-export * from './getPhotos';
+export * from './pickDocument';
 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-crop-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-picker for native image picker.',
   );
 }
 

package/src/optionalDependencies/saveFile.ts

@@ -0,0 +1,24 @@
+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;

package/src/optionalDependencies/shareImage.ts

@@ -1,5 +1,4 @@
 import { Platform } from 'react-native';
-import RNFS from 'react-native-fs';
 
 let RNShare;
 
@@ -9,10 +8,18 @@ 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 RNFS.readFile(url, 'base64');
+        const base64Image = await RNBlobUtil.fs.readFile(url, 'base64');
         const base64Url = `data:${type};base64,${base64Image}`;
         await RNShare.open({
           activityItemSources:
@@ -35,9 +42,6 @@ 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,
@@ -45,7 +49,7 @@ export const shareImage = RNShare
         });
         return true;
       } catch (error) {
-        console.warn('Sharing failed...');
+        console.warn('Sharing failed...', error);
       }
     }
   : null;

package/src/optionalDependencies/takePhoto.ts

@@ -3,9 +3,11 @@ import { AppState, Image, PermissionsAndroid, Platform } from 'react-native';
 let ImagePicker;
 
 try {
-  ImagePicker = require('react-native-image-crop-picker').default;
+  ImagePicker = require('react-native-image-picker');
 } catch (e) {
-  console.log('react-native-image-crop-picker is not installed');
+  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.',
+  );
 }
 
 export const takePhoto = ImagePicker
@@ -26,20 +28,22 @@ export const takePhoto = ImagePicker
         }
       }
       try {
-        const photo = await ImagePicker.openCamera({
-          compressImageQuality: Math.min(Math.max(0, compressImageQuality), 1),
+        const result = await ImagePicker.launchCamera({
+          quality: Math.min(Math.max(0, compressImageQuality), 1),
         });
-        if (photo.height && photo.width && photo.path) {
+        if (!result.assets.length) {
+          return {
+            cancelled: true,
+          };
+        }
+        const photo = result.assets[0];
+        if (photo.height && photo.width && photo.uri) {
           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.path, (width, height) => {
+                Image.getSize(photo.uri, (width, height) => {
                   resolve({ height, width });
                 });
               });
@@ -62,7 +66,7 @@ export const takePhoto = ImagePicker
             cancelled: false,
             size: photo.size,
             source: 'camera',
-            uri: photo.path,
+            uri: photo.uri,
             ...size,
           };
         }

package/stream-chat-react-native.podspec

@@ -0,0 +1,38 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "stream-chat-react-native"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "10.0" }
+  s.source       = { :git => "./ios", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+
+  s.dependency "React-Core"
+  s.ios.framework = 'AssetsLibrary', 'MobileCoreServices'
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+    install_modules_dependencies(s)
+  end
+end
+