stream-chat-expo 5.4.4-beta.1 → 5.5.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-expo",
   "description": "The official Expo SDK for Stream Chat, a service for building chat applications",
-  "version": "5.4.4-beta.1",
+  "version": "5.5.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -10,7 +10,7 @@
   "main": "src/index.js",
   "types": "types/index.d.ts",
   "dependencies": {
-    "stream-chat-react-native-core": "5.4.4-beta.1"
+    "stream-chat-react-native-core": "5.5.0-beta.1"
   },
   "peerDependencies": {
     "@react-native-community/netinfo": "^6.0.0",
@@ -23,6 +23,19 @@
     "expo-media-library": "^12.0.2",
     "expo-sharing": "^9.1.2"
   },
+  "devDependencies": {
+    "@react-native-community/netinfo": "^6.0.0",
+    "expo": ">=44.0.0",
+    "expo-av": "^12.0.4",
+    "expo-clipboard": "^3.1.0",
+    "expo-document-picker": "^9.1.2",
+    "expo-file-system": "^11.0.2",
+    "expo-haptics": "^10.0.0",
+    "expo-image-manipulator": "^9.1.0",
+    "expo-image-picker": "^10.1.4",
+    "expo-media-library": "^12.0.2",
+    "expo-sharing": "^9.1.2"
+  },
   "scripts": {
     "prepack": " cp ../../README.md .",
     "postpack": "rm README.md"

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

@@ -0,0 +1,20 @@
+import { AudioComponent } from '../optionalDependencies/Video';
+import type { AVPlaybackSource, AVPlaybackStatus, AVPlaybackStatusToSet } from 'expo-av';
+
+export const Sound = {
+  initializeSound: AudioComponent
+    ? async (
+        source: AVPlaybackSource,
+        initialStatus: AVPlaybackStatusToSet,
+        onPlaybackStatusUpdate: (playbackStatus: AVPlaybackStatus) => void,
+      ) => {
+        const { sound } = await AudioComponent.Sound.createAsync(
+          source,
+          initialStatus,
+          onPlaybackStatusUpdate,
+        );
+        return sound;
+      }
+    : null,
+  Player: null,
+};

package/src/handlers/Video.tsx

@@ -0,0 +1,16 @@
+import { VideoComponent } from '../optionalDependencies/Video';
+
+export const Video = VideoComponent
+  ? ({ onPlaybackStatusUpdate, paused, style, uri, videoRef }) => (
+      <VideoComponent
+        onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+        ref={videoRef}
+        resizeMode='contain'
+        shouldPlay={!paused}
+        source={{
+          uri,
+        }}
+        style={[style]}
+      />
+    )
+  : null;

package/src/handlers/compressImage.ts

@@ -0,0 +1,14 @@
+import * as ImageManipulator from 'expo-image-manipulator';
+
+export const compressImage = async ({
+  compressImageQuality = 1,
+  uri,
+}: {
+  compressImageQuality?: number;
+  uri: string;
+}) => {
+  const { uri: compressedUri } = await ImageManipulator.manipulateAsync(uri, [], {
+    compress: Math.min(Math.max(0, compressImageQuality), 1),
+  });
+  return compressedUri;
+};

package/src/handlers/deleteFile.ts

@@ -0,0 +1,11 @@
+import * as FileSystem from 'expo-file-system';
+
+export const deleteFile = async ({ uri }: { uri: string }) => {
+  try {
+    await FileSystem.deleteAsync(uri, { idempotent: true });
+    return true;
+  } catch (error) {
+    console.log('File deletion failed...');
+    return false;
+  }
+};

package/src/handlers/getLocalAssetUri.ts

@@ -0,0 +1,10 @@
+import * as MediaLibrary from 'expo-media-library';
+
+export const getLocalAssetUri = async (assetId: string): Promise<string> => {
+  try {
+    const { localUri } = await MediaLibrary.getAssetInfoAsync(assetId);
+    return localUri;
+  } catch {
+    throw new Error('getLocalAssetUri Error');
+  }
+};

package/src/handlers/getPhotos.ts

@@ -0,0 +1,32 @@
+import * as MediaLibrary from 'expo-media-library';
+
+export const getPhotos = async ({ after, first }: MediaLibrary.AssetsOptions) => {
+  try {
+    const { status } = await MediaLibrary.requestPermissionsAsync();
+    if (status !== 'granted') {
+      throw new Error('getPhotos Error');
+    }
+    const results = await MediaLibrary.getAssetsAsync({
+      after,
+      first,
+      mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
+      sortBy: [MediaLibrary.SortBy.modificationTime],
+    });
+    const assets = results.assets.map((asset) => ({
+      duration: asset.duration,
+      filename: asset.filename,
+      height: asset.height,
+      id: asset.id,
+      source: 'picker',
+      type: asset.mediaType,
+      uri: asset.uri,
+      width: asset.width,
+    }));
+
+    const hasNextPage = results.hasNextPage;
+    const endCursor = results.endCursor;
+    return { assets, endCursor, hasNextPage };
+  } catch {
+    throw new Error('getPhotos Error');
+  }
+};

package/src/handlers/index.ts

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

package/src/handlers/pickDocument.ts

@@ -0,0 +1,20 @@
+import * as DocumentPicker from 'expo-document-picker';
+
+export const pickDocument = async () => {
+  try {
+    const { type, ...rest } = await DocumentPicker.getDocumentAsync();
+    if (type === 'cancel') {
+      return {
+        cancelled: true,
+      };
+    }
+    return {
+      cancelled: false,
+      docs: [rest],
+    };
+  } catch (err) {
+    return {
+      cancelled: true,
+    };
+  }
+};

package/src/handlers/saveFile.ts

@@ -0,0 +1,11 @@
+import * as FileSystem from 'expo-file-system';
+
+export const saveFile = async ({ fileName, fromUrl }: { fileName: string; fromUrl: string }) => {
+  try {
+    const path = FileSystem.cacheDirectory + encodeURIComponent(fileName);
+    const downloadedImage = await FileSystem.downloadAsync(fromUrl, path);
+    return downloadedImage.uri;
+  } catch (error) {
+    throw new Error('Downloading image failed...');
+  }
+};

package/src/handlers/setClipboardString.ts

@@ -0,0 +1,11 @@
+let Clipboard: { setString: (string: string) => void } | undefined;
+
+try {
+  Clipboard = require('expo-clipboard');
+  console.log({ Clipboard });
+} catch (e) {
+  // do nothing
+}
+
+export const setClipboardString =
+  Clipboard !== undefined ? (string: string) => Clipboard.setString(string) : null;

package/src/handlers/shareImage.ts

@@ -0,0 +1,10 @@
+import * as Sharing from 'expo-sharing';
+
+export const shareImage = async ({ type, url }: { type: string; url: string }) => {
+  try {
+    await Sharing.shareAsync(url, { mimeType: type, UTI: type });
+    return true;
+  } catch (error) {
+    console.warn('Sharing failed or cancelled...');
+  }
+};

package/src/handlers/takePhoto.ts

@@ -0,0 +1,63 @@
+import { Image, Platform } from 'react-native';
+import * as ImagePicker from 'expo-image-picker';
+
+type Size = {
+  width?: number;
+  height?: number;
+};
+
+export const takePhoto = async ({ compressImageQuality = 1 }) => {
+  try {
+    const permissionCheck = await ImagePicker.getCameraPermissionsAsync();
+    const permissionGranted =
+      permissionCheck?.status === 'granted'
+        ? permissionCheck
+        : await ImagePicker.requestCameraPermissionsAsync();
+
+    if (permissionGranted?.status === 'granted' || permissionGranted?.granted === true) {
+      const photo = await ImagePicker.launchCameraAsync({
+        quality: Math.min(Math.max(0, compressImageQuality), 1),
+      });
+
+      if (photo.cancelled === false && photo.height && photo.width && photo.uri) {
+        let size: 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 = (): Promise<Size> =>
+            new Promise((resolve) => {
+              Image.getSize(photo.uri, (width, height) => {
+                resolve({ height, width });
+              });
+            });
+
+          try {
+            const { height, width } = await getSize();
+            size.height = height;
+            size.width = width;
+          } catch (e) {
+            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.uri,
+          ...size,
+        };
+      }
+    }
+  } catch (error) {
+    console.log(error);
+  }
+  return { cancelled: true };
+};

package/src/handlers/triggerHaptic.ts

@@ -0,0 +1,34 @@
+import * as Haptics from 'expo-haptics';
+
+type HapticFeedbackTypes =
+  | 'impactHeavy'
+  | 'impactLight'
+  | 'impactMedium'
+  | 'notificationError'
+  | 'notificationSuccess'
+  | 'notificationWarning';
+
+export const triggerHaptic = (method: HapticFeedbackTypes) => {
+  switch (method) {
+    case 'impactHeavy':
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+      break;
+    case 'impactLight':
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      break;
+    case 'impactMedium':
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+      break;
+    case 'notificationError':
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      break;
+    case 'notificationSuccess':
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      break;
+    case 'notificationWarning':
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+      break;
+    default:
+      Haptics.selectionAsync();
+  }
+};

package/src/index.js

@@ -1,254 +1,39 @@
-import React from 'react';
+import { FlatList } from 'react-native';
 
-import { FlatList, Image, Platform } from 'react-native';
-
-import NetInfo from '@react-native-community/netinfo';
-import * as DocumentPicker from 'expo-document-picker';
-import * as FileSystem from 'expo-file-system';
-import * as Haptics from 'expo-haptics';
-import * as ImageManipulator from 'expo-image-manipulator';
-import * as ImagePicker from 'expo-image-picker';
-import * as MediaLibrary from 'expo-media-library';
-import * as Sharing from 'expo-sharing';
 import { registerNativeHandlers } from 'stream-chat-react-native-core';
 
-import { AudioComponent, VideoComponent } from './optionalDependencies/Video';
+import {
+  compressImage,
+  deleteFile,
+  getLocalAssetUri,
+  getPhotos,
+  NetInfo,
+  pickDocument,
+  saveFile,
+  setClipboardString,
+  shareImage,
+  Sound,
+  takePhoto,
+  triggerHaptic,
+  Video,
+} from './handlers';
 
 registerNativeHandlers({
-  compressImage: async ({ compressImageQuality = 1, uri }) => {
-    const { uri: compressedUri } = await ImageManipulator.manipulateAsync(uri, [], {
-      compress: Math.min(Math.max(0, compressImageQuality), 1),
-    });
-    return compressedUri;
-  },
-  deleteFile: async ({ uri }) => {
-    try {
-      await FileSystem.deleteAsync(uri, { idempotent: true });
-      return true;
-    } catch (error) {
-      console.log('File deletion failed...');
-      return false;
-    }
-  },
+  compressImage,
+  deleteFile,
   FlatList,
-  getLocalAssetUri: async (assetId) => {
-    try {
-      const { localUri } = await MediaLibrary.getAssetInfoAsync(assetId);
-      return localUri;
-    } catch {
-      throw new Error('getLocalAssetUri Error');
-    }
-  },
-  getPhotos: async ({ after, first }) => {
-    try {
-      const { status } = await MediaLibrary.requestPermissionsAsync();
-      if (status !== 'granted') {
-        throw new Error('getPhotos Error');
-      }
-      const results = await MediaLibrary.getAssetsAsync({
-        after,
-        first,
-        mediaType: [MediaLibrary.MediaType.photo, MediaLibrary.MediaType.video],
-        sortBy: [MediaLibrary.SortBy.modificationTime],
-      });
-      const assets = results.assets.map((asset) => ({
-        duration: asset.duration,
-        filename: asset.filename,
-        height: asset.height,
-        id: asset.id,
-        source: 'picker',
-        type: asset.mediaType,
-        uri: asset.uri,
-        width: asset.width,
-      }));
-
-      const hasNextPage = results.hasNextPage;
-      const endCursor = results.endCursor;
-      return { assets, endCursor, hasNextPage };
-    } catch {
-      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 }) => {
-          listener(isConnected);
-        });
-        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 {
-      const { type, ...rest } = await DocumentPicker.getDocumentAsync();
-      if (type === 'cancel') {
-        return {
-          cancelled: true,
-        };
-      }
-      return {
-        cancelled: false,
-        docs: [rest],
-      };
-    } catch (err) {
-      return {
-        cancelled: true,
-      };
-    }
-  },
-  saveFile: async ({ fileName, fromUrl }) => {
-    try {
-      const path = FileSystem.cacheDirectory + encodeURIComponent(fileName);
-      const downloadedImage = await FileSystem.downloadAsync(fromUrl, path);
-      return downloadedImage.uri;
-    } catch (error) {
-      throw new Error('Downloading image failed...');
-    }
-  },
+  getLocalAssetUri,
+  getPhotos,
+  NetInfo,
+  pickDocument,
+  saveFile,
+  setClipboardString,
   SDK: 'stream-chat-expo',
-  shareImage: async ({ type, url }) => {
-    try {
-      await Sharing.shareAsync(url, { mimeType: type, UTI: type });
-      return true;
-    } catch (error) {
-      throw new Error('Sharing failed or cancelled...');
-    }
-  },
-  Sound: {
-    initializeSound: AudioComponent
-      ? async (source, initialStatus, onPlaybackStatusUpdate) => {
-          const { sound } = await AudioComponent.Sound.createAsync(
-            source,
-            initialStatus,
-            onPlaybackStatusUpdate,
-          );
-          return sound;
-        }
-      : null,
-    Player: null,
-  },
-  takePhoto: async ({ compressImageQuality = 1 }) => {
-    try {
-      const permissionCheck = await ImagePicker.getCameraPermissionsAsync();
-      const permissionGranted =
-        permissionCheck?.status === 'granted'
-          ? permissionCheck
-          : await ImagePicker.requestCameraPermissionsAsync();
-
-      if (permissionGranted?.status === 'granted' || permissionGranted?.granted === true) {
-        const photo = await ImagePicker.launchCameraAsync({
-          quality: Math.min(Math.max(0, compressImageQuality), 1),
-        });
-        if (photo.height && photo.width && photo.uri) {
-          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.uri, (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.uri,
-            ...size,
-          };
-        }
-      }
-    } catch (error) {
-      console.log(error);
-    }
-    return { cancelled: true };
-  },
-  triggerHaptic: (method) => {
-    switch (method) {
-      case 'impactHeavy':
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
-        break;
-      case 'impactLight':
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-        break;
-      case 'impactMedium':
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
-        break;
-      case 'notificationError':
-        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
-        break;
-      case 'notificationSuccess':
-        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
-        break;
-      case 'notificationWarning':
-        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
-        break;
-      default:
-        Haptics.selectionAsync();
-    }
-  },
-  // eslint-disable-next-line react/display-name
-  Video: VideoComponent
-    ? ({ onPlaybackStatusUpdate, paused, style, uri, videoRef }) => (
-        <VideoComponent
-          onPlaybackStatusUpdate={onPlaybackStatusUpdate}
-          ref={videoRef}
-          resizeMode='contain'
-          shouldPlay={!paused}
-          source={{
-            uri,
-          }}
-          style={[style]}
-        />
-      )
-    : null,
+  shareImage,
+  Sound,
+  takePhoto,
+  triggerHaptic,
+  Video,
 });
 
 export * from 'stream-chat-react-native-core';