stream-chat-react-native 4.0.0 → 4.1.0

package/README.md

@@ -31,18 +31,6 @@
 - [Keep in mind](#-keep-in-mind)
 - [Contributing](#-contributing)
 
-## 🔐 React Native Compatibility
-
-To use this library you need to ensure you match up with the correct version of React Native you are using.
-
-| `stream-chat-react-native` version  | React Native Version  | `stream-chat` Version |
-| ----------------------------------  | --------------------- | --------------------- |
-| `3.2.0`                             | `>= 0.60`             | `>= 3.5.1`            |
-| `3.0.0`                             | `>= 0.60`             | `>= 3.0.0`            |
-| `2.x.x`                             | `>= 0.60`             | `< 3.0.0`             |
-| `1.x.x`                             | `>= 0.59`             | `< 3.0.0`             |
-| `0.x.x`                             | `*`                   | `< 3.0.0`             |
-
 ## 📖 React Native Chat Tutorial
 
 The best place to start is the [React Native Chat Tutorial](https://github.com/GetStream/stream-chat-react-native/wiki/Tutorial-v3.0). It teaches you how to use this SDK and also shows how to make frequently required changes.
@@ -58,7 +46,7 @@ This repo includes 4 example apps. One made with Expo, one Native JavaScript cod
 
 - [Expo example](./examples/ExpoMessaging)
 - [Native example](./examples/NativeMessaging)
-- [Typescript example](./examples/TypescriptMessaging)
+- [Typescript example](./examples/TypeScriptMessaging)
 - [Fully featured messaging application](./examples/SampleApp)
 
 Besides, our team maintains a dedicated repository for fully-fledged sample applications and demos at [GetStream/react-native-samples](https://github.com/GetStream/react-native-samples). Please consider checking following sample applications:

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": "4.0.0",
+  "version": "4.1.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -11,19 +11,18 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "es6-symbol": "^3.1.3",
-    "stream-chat-react-native-core": "4.0.0"
+    "stream-chat-react-native-core": "4.1.0"
   },
   "peerDependencies": {
-    "@react-native-community/blur": ">=3.6.0",
     "@react-native-community/cameraroll": ">=4.0.1",
     "@react-native-community/netinfo": ">=2.0.7",
+    "@stream-io/flat-list-mvcp": "0.10.1",
     "react-native": ">=0.60.0",
     "react-native-document-picker": ">=3.2.0",
     "react-native-fs": ">=2.16.6",
     "react-native-haptic-feedback": ">=1.11.0",
     "react-native-image-crop-picker": ">=0.33.2",
     "react-native-image-resizer": ">=1.4.2",
-    "@stream-io/flat-list-mvcp": "0.10.1",
     "react-native-share": ">=4.1.0"
   },
   "scripts": {

package/src/index.js

@@ -1,22 +1,19 @@
 import React from 'react';
-import { PermissionsAndroid, Platform } from 'react-native';
-import { BlurView as RNBlurView } from '@react-native-community/blur';
-import CameraRoll from '@react-native-community/cameraroll';
-import NetInfo from '@react-native-community/netinfo';
-import { FlatList } from '@stream-io/flat-list-mvcp';
+import { Image, PermissionsAndroid, 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-community/cameraroll';
+import NetInfo from '@react-native-community/netinfo';
+import { FlatList } from '@stream-io/flat-list-mvcp';
 import { registerNativeHandlers } from 'stream-chat-react-native-core';
 
 registerNativeHandlers({
-  // eslint-disable-next-line react/display-name
-  BlurView: ({ blurAmount = 10, blurType = 'dark', style }) => (
-    <RNBlurView blurAmount={blurAmount} blurType={blurType} style={style} />
-  ),
   compressImage: async ({ compressImageQuality = 1, height, uri, width }) => {
     try {
       const { uri: compressedUri } = await ImageResizer.createResizedImage(
@@ -95,8 +92,11 @@ registerNativeHandlers({
       let unsubscribe;
       // For NetInfo >= 3.x.x
       if (NetInfo.fetch && typeof NetInfo.fetch === 'function') {
-        unsubscribe = NetInfo.addEventListener(({ isConnected }) => {
-          listener(isConnected);
+        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 {
@@ -154,7 +154,7 @@ registerNativeHandlers({
   },
   saveFile: async ({ fileName, fromUrl }) => {
     try {
-      const path = RNFS.DocumentDirectoryPath + '/' + fileName;
+      const path = RNFS.CachesDirectoryPath + '/' + encodeURIComponent(fileName);
       await RNFS.downloadFile({ fromUrl, toFile: path }).promise;
       return 'file://' + path;
     } catch (error) {
@@ -201,13 +201,41 @@ registerNativeHandlers({
     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,
-        height: photo.height,
         source: 'camera',
         uri: photo.path,
-        width: photo.width,
+        ...size,
       };
     }
     return { cancelled: true };