stream-chat-react-native 5.4.0-beta.2 → 5.4.0-beta.4

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.4.0-beta.2",
+  "version": "5.4.0-beta.4",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -11,7 +11,7 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "es6-symbol": "^3.1.3",
-    "stream-chat-react-native-core": "5.4.0-beta.2"
+    "stream-chat-react-native-core": "5.4.0-beta.4"
   },
   "peerDependencies": {
     "@react-native-camera-roll/camera-roll": "^5.0.0",
@@ -28,5 +28,12 @@
   "scripts": {
     "prepack": " cp ../../README.md .",
     "postpack": "rm README.md"
+  },
+  "devDependencies": {
+    "@react-native-camera-roll/camera-roll": "^5.0.2",
+    "@types/react-native-share": "^3.3.3",
+    "react-native-document-picker": "^8.1.1",
+    "react-native-haptic-feedback": "^1.14.0",
+    "react-native-image-crop-picker": "^0.38.0"
   }
 }

package/src/handlers/NetInfo.ts

@@ -0,0 +1,43 @@
+import { default as OriginalNetInfo, NetInfoState } 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/handlers/Sound.tsx

@@ -0,0 +1,26 @@
+import AudioVideoPlayer from '../optionalDependencies/Video';
+
+export const Sound = {
+  initializeSound: null,
+  // eslint-disable-next-line react/display-name
+  Player: AudioVideoPlayer
+    ? ({ onBuffer, onEnd, onLoad, onProgress, paused, soundRef, style, uri }) => (
+        <AudioVideoPlayer
+          audioOnly={true}
+          onBuffer={onBuffer}
+          onEnd={onEnd}
+          onError={(error: Error) => {
+            console.log(error);
+          }}
+          onLoad={onLoad}
+          onProgress={onProgress}
+          paused={paused}
+          ref={soundRef}
+          source={{
+            uri,
+          }}
+          style={style}
+        />
+      )
+    : null,
+};

package/src/handlers/Video.tsx

@@ -0,0 +1,22 @@
+import AudioVideoPlayer from '../optionalDependencies/Video';
+export const Video = AudioVideoPlayer
+  ? ({ onBuffer, onEnd, onLoad, onProgress, paused, repeat, style, uri, videoRef }) => (
+      <AudioVideoPlayer
+        ignoreSilentSwitch={'ignore'}
+        onBuffer={onBuffer}
+        onEnd={onEnd}
+        onError={(error) => {
+          console.error(error);
+        }}
+        onLoad={onLoad}
+        onProgress={onProgress}
+        paused={paused}
+        ref={videoRef}
+        repeat={repeat}
+        source={{
+          uri,
+        }}
+        style={style}
+      />
+    )
+  : null;

package/src/handlers/compressImage.ts

@@ -0,0 +1,34 @@
+// @ts-ignore this module does not have a type declaration
+import ImageResizer from 'react-native-image-resizer';
+
+type CompressImageParams = {
+  compressImageQuality: number;
+  height: number;
+  uri: string;
+  width: number;
+};
+
+export const compressImage = async ({
+  compressImageQuality = 1,
+  height,
+  uri,
+  width,
+}: CompressImageParams) => {
+  try {
+    const { uri: compressedUri } = await ImageResizer.createResizedImage(
+      uri,
+      height,
+      width,
+      'JPEG',
+      Math.min(Math.max(0, compressImageQuality), 1) * 100,
+      0,
+      undefined,
+      false,
+      'cover',
+    );
+    return compressedUri;
+  } catch (error) {
+    console.log(error);
+    return uri;
+  }
+};

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/getLocalAssetUri.ts

@@ -0,0 +1,10 @@
+import { CameraRoll } from '@react-native-camera-roll/camera-roll';
+
+export const getLocalAssetUri = async (remoteUri: string) => {
+  try {
+    const localUri = await CameraRoll.save(remoteUri);
+    return localUri;
+  } catch {
+    throw new Error('getLocalAssetUri Error');
+  }
+};

package/src/handlers/getPhotos.ts

@@ -0,0 +1,39 @@
+import { PermissionsAndroid, Platform } from 'react-native';
+import { CameraRoll, GetPhotosParams } from '@react-native-camera-roll/camera-roll';
+
+export const getPhotos = async ({ after, first }: Pick<GetPhotosParams, 'after' | 'first'>) => {
+  try {
+    if (Platform.OS === 'android') {
+      const readExternalStoragePermissionAndroid =
+        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE;
+      const hasPermission = await PermissionsAndroid.check(readExternalStoragePermissionAndroid);
+      if (!hasPermission) {
+        const granted = await PermissionsAndroid.request(readExternalStoragePermissionAndroid, {
+          buttonNegative: 'Deny',
+          buttonNeutral: 'Ask Me Later',
+          buttonPositive: 'Allow',
+          message: 'Permissions are required to access and share photos.',
+          title: 'Photos Access',
+        });
+        if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
+          throw new Error('getPhotos Error');
+        }
+      }
+    }
+    const results = await CameraRoll.getPhotos({
+      after,
+      assetType: 'All',
+      first,
+      include: ['fileSize', 'filename', 'imageSize', 'playableDuration'],
+    });
+    const assets = results.edges.map((edge) => ({
+      ...edge.node.image,
+      source: 'picker',
+    }));
+    const hasNextPage = results.page_info.has_next_page;
+    const endCursor = results.page_info.end_cursor;
+    return { assets, endCursor, hasNextPage };
+  } catch (_error) {
+    throw new Error('getPhotos Error');
+  }
+};

package/src/handlers/index.ts

@@ -0,0 +1,11 @@
+export * from './shareImage';
+export * from './deleteFile';
+export * from './compressImage';
+export * from './getLocalAssetUri';
+export * from './getPhotos';
+export * from './NetInfo';
+export * from './saveFile';
+export * from './takePhoto';
+export * from './triggerHaptic';
+export * from './Sound';
+export * from './Video';

package/src/handlers/pickDocument.ts

@@ -0,0 +1,27 @@
+import DocumentPicker from 'react-native-document-picker';
+
+export const pickDocument = async ({ maxNumberOfFiles }: { maxNumberOfFiles: number }) => {
+  try {
+    let res = await DocumentPicker.pickMultiple({
+      type: [DocumentPicker.types.allFiles],
+    });
+
+    if (maxNumberOfFiles && res.length > maxNumberOfFiles) {
+      res = res.slice(0, maxNumberOfFiles);
+    }
+
+    return {
+      cancelled: false,
+      docs: res.map(({ name, size, type, uri }) => ({
+        name,
+        size,
+        type,
+        uri,
+      })),
+    };
+  } catch (err) {
+    return {
+      cancelled: true,
+    };
+  }
+};

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/handlers/shareImage.ts

@@ -0,0 +1,51 @@
+import RNFS from 'react-native-fs';
+import { Platform } from 'react-native';
+
+let RNShare;
+
+try {
+  RNShare = require('react-native-share').default;
+} catch (e) {
+  console.log('react-native-share is not installed');
+}
+
+export const shareImage = RNShare
+  ? async ({ type, url }) => {
+      try {
+        const base64Image = await RNFS.readFile(url, 'base64');
+        const base64Url = `data:${type};base64,${base64Image}`;
+        await RNShare.open({
+          activityItemSources:
+            Platform.OS === 'ios'
+              ? [
+                  {
+                    item: {
+                      default: {
+                        content: url,
+                        type: 'url',
+                      },
+                    },
+                    linkMetadata: {
+                      icon: url,
+                    },
+                    placeholderItem: {
+                      content: url,
+                      type: 'url',
+                    },
+                  },
+                ]
+              : 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,
+          url: Platform.OS === 'android' ? base64Url : undefined,
+        });
+        return true;
+      } catch (error) {
+        throw new Error('Sharing failed...');
+      }
+    }
+  : null;

package/src/handlers/takePhoto.ts

@@ -0,0 +1,47 @@
+import { Image, Platform } from 'react-native';
+import ImagePicker from 'react-native-image-crop-picker';
+
+export const takePhoto = async ({ compressImageQuality = Platform.OS === 'ios' ? 0.8 : 1 }) => {
+  const photo = await ImagePicker.openCamera({
+    compressImageQuality: Math.min(Math.max(0, compressImageQuality), 1),
+  });
+
+  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.path, (width, height) => {
+            resolve({ height, width });
+          });
+        });
+
+      try {
+        const { height, width } = await getSize();
+        size.height = height;
+        size.width = width;
+      } catch (e) {
+        // do nothing
+        console.warn('Error get image size of picture caputred from camera ', e);
+      }
+    } else {
+      size = {
+        height: photo.height,
+        width: photo.width,
+      };
+    }
+
+    return {
+      cancelled: false,
+      source: 'camera',
+      uri: photo.path,
+      ...size,
+    };
+  }
+  return { cancelled: true };
+};

package/src/handlers/triggerHaptic.ts

@@ -0,0 +1,46 @@
+let ReactNativeHapticFeedback;
+
+try {
+  ReactNativeHapticFeedback = require('react-native-haptic-feedback');
+} catch (e) {
+  console.warn('react-native-haptic-feedback is not installed.');
+}
+
+/**
+ * Since react-native-haptic-feedback isn't installed by default, we've
+ * copied the types from the package here.
+ *
+ * @see https://github.com/junina-de/react-native-haptic-feedback/blob/master/index.d.ts
+ * */
+export type HapticFeedbackTypes =
+  | 'selection'
+  | 'impactLight'
+  | 'impactMedium'
+  | 'impactHeavy'
+  | 'rigid'
+  | 'soft'
+  | 'notificationSuccess'
+  | 'notificationWarning'
+  | 'notificationError'
+  | 'clockTick'
+  | 'contextClick'
+  | 'keyboardPress'
+  | 'keyboardRelease'
+  | 'keyboardTap'
+  | 'longPress'
+  | 'textHandleMove'
+  | 'virtualKey'
+  | 'virtualKeyRelease'
+  | 'effectClick'
+  | 'effectDoubleClick'
+  | 'effectHeavyClick'
+  | 'effectTick';
+
+export const triggerHaptic = ReactNativeHapticFeedback
+  ? (method: HapticFeedbackTypes) => {
+      ReactNativeHapticFeedback.trigger(method, {
+        enableVibrateFallback: false,
+        ignoreAndroidSystemSettings: false,
+      });
+    }
+  : () => {};

package/src/index.js

@@ -1,300 +1,38 @@
-import React from 'react';
-import { Image, PermissionsAndroid, Platform } from 'react-native';
+import { Platform } from 'react-native';
 
-import DocumentPicker from 'react-native-document-picker';
-import RNFS from 'react-native-fs';
-import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import ImagePicker from 'react-native-image-crop-picker';
-import ImageResizer from 'react-native-image-resizer';
-import RNShare from 'react-native-share';
-
-import { CameraRoll } from '@react-native-camera-roll/camera-roll';
-import NetInfo from '@react-native-community/netinfo';
 import { FlatList } from '@stream-io/flat-list-mvcp';
 import { registerNativeHandlers } from 'stream-chat-react-native-core';
 
-import AudioVideoPlayer from './optionalDependencies/Video';
+import {
+  compressImage,
+  deleteFile,
+  NetInfo,
+  getLocalAssetUri,
+  getPhotos,
+  pickDocument,
+  saveFile,
+  shareImage,
+  Sound,
+  takePhoto,
+  triggerHaptic,
+  Video,
+} from './handlers';
 
 registerNativeHandlers({
-  compressImage: async ({ compressImageQuality = 1, height, uri, width }) => {
-    try {
-      const { uri: compressedUri } = await ImageResizer.createResizedImage(
-        uri,
-        height,
-        width,
-        'JPEG',
-        Math.min(Math.max(0, compressImageQuality), 1) * 100,
-        0,
-        undefined,
-        false,
-        'cover',
-      );
-      return compressedUri;
-    } catch (error) {
-      console.log(error);
-      return uri;
-    }
-  },
-  deleteFile: async ({ uri }) => {
-    try {
-      await RNFS.unlink(uri);
-      return true;
-    } catch (error) {
-      console.log('File deletion failed...');
-      return false;
-    }
-  },
+  compressImage,
+  deleteFile,
   FlatList,
-  getLocalAssetUri: async (remoteUri) => {
-    try {
-      const localUri = await CameraRoll.save(remoteUri);
-      return localUri;
-    } catch {
-      throw new Error('getLocalAssetUri Error');
-    }
-  },
-  getPhotos: async ({ after, first }) => {
-    try {
-      if (Platform.OS === 'android') {
-        const readExternalStoragePermissionAndroid =
-          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE;
-        const hasPermission = await PermissionsAndroid.check(readExternalStoragePermissionAndroid);
-        if (!hasPermission) {
-          const granted = await PermissionsAndroid.request(readExternalStoragePermissionAndroid, {
-            buttonNegative: 'Deny',
-            buttonNeutral: 'Ask Me Later',
-            buttonPositive: 'Allow',
-            message: 'Permissions are required to access and share photos.',
-            title: 'Photos Access',
-          });
-          if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
-            throw new Error('getPhotos Error');
-          }
-        }
-      }
-      const results = await CameraRoll.getPhotos({
-        after,
-        assetType: 'All',
-        first,
-        include: ['fileSize', 'filename', 'imageSize', 'playableDuration'],
-      });
-      const assets = results.edges.map((edge) => ({
-        ...edge.node.image,
-        source: 'picker',
-      }));
-      const hasNextPage = results.page_info.has_next_page;
-      const endCursor = results.page_info.end_cursor;
-      return { assets, endCursor, hasNextPage };
-    } catch (_error) {
-      throw new Error('getPhotos Error');
-    }
-  },
-  NetInfo: {
-    addEventListener(listener) {
-      let unsubscribe;
-      // For NetInfo >= 3.x.x
-      if (NetInfo.fetch && typeof NetInfo.fetch === 'function') {
-        unsubscribe = NetInfo.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 = NetInfo.addEventListener('connectionChange', () => {
-          NetInfo.isConnected.fetch().then((isConnected) => {
-            listener(isConnected);
-          });
-        });
-
-        return unsubscribe.remove;
-      }
-    },
-
-    fetch() {
-      return new Promise((resolve, reject) => {
-        // For NetInfo >= 3.x.x
-        if (NetInfo.fetch && typeof NetInfo.fetch === 'function') {
-          NetInfo.fetch().then(({ isConnected }) => {
-            resolve(isConnected);
-          }, reject);
-        } else {
-          // For NetInfo < 3.x.x
-          NetInfo.isConnected.fetch().then((isConnected) => {
-            resolve(isConnected);
-          }, reject);
-        }
-      });
-    },
-  },
-  pickDocument: async ({ maxNumberOfFiles }) => {
-    try {
-      let res = await DocumentPicker.pickMultiple({
-        type: [DocumentPicker.types.allFiles],
-      });
-
-      if (maxNumberOfFiles && res.length > maxNumberOfFiles) {
-        res = res.slice(0, maxNumberOfFiles);
-      }
-
-      return {
-        cancelled: false,
-        docs: res.map(({ name, size, type, uri }) => ({
-          name,
-          size,
-          type,
-          uri,
-        })),
-      };
-    } catch (err) {
-      return {
-        cancelled: true,
-      };
-    }
-  },
-  saveFile: async ({ fileName, fromUrl }) => {
-    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...');
-    }
-  },
+  getLocalAssetUri,
+  getPhotos,
+  NetInfo,
+  pickDocument,
+  saveFile,
   SDK: 'stream-chat-react-native',
-  shareImage: async ({ type, url }) => {
-    try {
-      const base64Image = await RNFS.readFile(url, 'base64');
-      const base64Url = `data:${type};base64,${base64Image}`;
-      await RNShare.open({
-        activityItemSources:
-          Platform.OS === 'ios'
-            ? [
-                {
-                  item: {
-                    default: {
-                      content: url,
-                      type: 'url',
-                    },
-                  },
-                  linkMetadata: {
-                    icon: url,
-                  },
-                  placeholderItem: {
-                    content: url,
-                    type: 'url',
-                  },
-                },
-              ]
-            : undefined,
-        excludedActivityTypes: [],
-        failOnCancel: false,
-        type,
-        url: Platform.OS === 'android' ? base64Url : undefined,
-      });
-      return true;
-    } catch (error) {
-      throw new Error('Sharing failed...');
-    }
-  },
-  Sound: {
-    initializeSound: null,
-    // eslint-disable-next-line react/display-name
-    Player: AudioVideoPlayer
-      ? ({ onBuffer, onEnd, onLoad, onProgress, paused, soundRef, style, uri }) => (
-          <AudioVideoPlayer
-            audioOnly={true}
-            onBuffer={onBuffer}
-            onEnd={onEnd}
-            onError={(error) => {
-              console.log(error);
-            }}
-            onLoad={onLoad}
-            onProgress={onProgress}
-            paused={paused}
-            ref={soundRef}
-            source={{
-              uri,
-            }}
-            style={style}
-          />
-        )
-      : null,
-  },
-  takePhoto: async ({ compressImageQuality = Platform.OS === 'ios' ? 0.8 : 1 }) => {
-    const photo = await ImagePicker.openCamera({
-      compressImageQuality: Math.min(Math.max(0, compressImageQuality), 1),
-    });
-
-    if (photo.height && photo.width && photo.path) {
-      let size = {};
-      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 = () =>
-          new Promise((resolve) => {
-            Image.getSize(photo.path, (width, height) => {
-              resolve({ height, width });
-            });
-          });
-
-        try {
-          const { height, width } = await getSize();
-          size.height = height;
-          size.width = width;
-        } catch (e) {
-          // do nothing
-          console.warning('Error get image size of picture caputred from camera ', e);
-        }
-      } else {
-        size = {
-          height: photo.height,
-          width: photo.width,
-        };
-      }
-
-      return {
-        cancelled: false,
-        source: 'camera',
-        uri: photo.path,
-        ...size,
-      };
-    }
-    return { cancelled: true };
-  },
-  triggerHaptic: (method) => {
-    ReactNativeHapticFeedback.trigger(method, {
-      enableVibrateFallback: false,
-      ignoreAndroidSystemSettings: false,
-    });
-  },
-  // eslint-disable-next-line react/display-name
-  Video: AudioVideoPlayer
-    ? ({ onBuffer, onEnd, onLoad, onProgress, paused, repeat, style, uri, videoRef }) => (
-        <AudioVideoPlayer
-          ignoreSilentSwitch={'ignore'}
-          onBuffer={onBuffer}
-          onEnd={onEnd}
-          onError={(error) => {
-            console.error(error);
-          }}
-          onLoad={onLoad}
-          onProgress={onProgress}
-          paused={paused}
-          ref={videoRef}
-          repeat={repeat}
-          source={{
-            uri,
-          }}
-          style={style}
-        />
-      )
-    : null,
+  shareImage,
+  Sound,
+  takePhoto,
+  triggerHaptic,
+  Video,
 });
 
 if (Platform.OS === 'android') {

package/src/optionalDependencies/Video.ts

@@ -1,4 +1,23 @@
-let AudioVideoComponent;
+import { StyleProp, ViewStyle } from 'react-native';
+
+let AudioVideoComponent:
+  | React.ComponentType<{
+      audioOnly?: boolean;
+      ignoreSilentSwitch?: 'ignore' | 'obey';
+      repeat?: boolean;
+      onBuffer: () => void;
+      onEnd: () => void;
+      onError: (error: Error) => void;
+      onLoad: () => void;
+      onProgress: () => void;
+      paused: boolean;
+      ref: React.RefObject<any>;
+      source: {
+        uri: string;
+      };
+      style: StyleProp<ViewStyle>;
+    }>
+  | undefined;
 try {
   // eslint-disable-next-line no-undef
   const videoPackage = require('react-native-video');