Merge pull request #102 from GetStream/vishal/expo-36-support

Expo 36 support and some more stuff

Author: vishalnarkhede

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [0.5.0] 2019-12-23
+
+#### stream-chat-expo (Expo package)
+
+- Changes to add compatibility for Expo 36. Adding [netinfo](https://github.com/react-native-community/react-native-netinfo) as peer dependency - https://github.com/GetStream/stream-chat-react-native/issues/97
+- Disabling the longpress on image viewer (in Attachment) - https://github.com/GetStream/stream-chat-react-native/issues/100 to avoid freezing of UI.
+- Fixing broken threads issue
+- Support for `additionalFlatListProps` prop in `MessageList` and `ChannelList` component
+- Changing proptype for component type props to `elementType` instead of `func`
+
+#### stream-chat-react-native (Native package)
+
+- Disabling the longpress on image viewer (in Attachment) - https://github.com/GetStream/stream-chat-react-native/issues/100 to avoid freezing of UI.
+- Fixing broken threads issue
+- Support for `additionalFlatListProps` prop in `MessageList` and `ChannelList` component
+- Changing proptype for component type props to `elementType` instead of `func`
+
 ## [0.4.0] 2019-12-16
 
 - Adding support for customizing markdown styles - https://github.com/GetStream/stream-chat-react-native/pull/99/files#diff-ede54911d9164ea37e65e92f2e18cb91R56

Makefile

@@ -2,7 +2,7 @@
 .PHONY: example-build example-deps
 
 EXAMPLES_PATH = examples
-EXAMPLES = one two
+EXAMPLES = ExpoMessaging NativeMessaging
 EXAMPLES_APPS = $(addprefix $(EXAMPLES_PATH)/,$(EXAMPLES))
 EXAMPLES_APPS_DEPS = $(addsuffix /node_modules/installed_dependencies,$(EXAMPLES_APPS))
 

README.md

@@ -103,15 +103,20 @@ yarn global add expo-cli
 # * >=12.0.0 (Current Release)
 expo init StreamChatExpoExample
 cd StreamChatExpoExample
+
+# Add chat expo package
 yarn add stream-chat-expo
+
+# If you are using stream-chat-expo <= 0.4.0 and expo <= 34, then you don't need to add @react-native-community/netinfo as dependency. Since previously we used use NetInfo from react-native package.
+yarn add @react-native-community/netinfo
 ```
 
-Please check [Example](https://github.com/GetStream/stream-chat-react-native/blob/master/examples/one/App.js) to see usage of the components.
+Please check [Example](https://github.com/GetStream/stream-chat-react-native/blob/master/examples/ExpoMessaging/App.js) to see usage of the components.
 
-OR you can swap [this file](https://github.com/GetStream/stream-chat-react-native/blob/master/examples/one/App.js) for your `App.js` in the root folder with additional following steps:
+OR you can swap [this file](https://github.com/GetStream/stream-chat-react-native/blob/master/examples/ExpoMessaging/App.js) for your `App.js` in the root folder with additional following steps:
 
 ```bash
-yarn add react-navigation
+yarn add react-navigation@3.2.1 react-native-gesture-handler react-native-reanimated
 ```
 
 and finally
@@ -146,7 +151,7 @@ react-native link react-native-document-picker
 
 ```
 
-Please check [Example](https://github.com/GetStream/stream-chat-react-native/blob/master/examples/two/App.js) to see usage of components.
+Please check [Example](https://github.com/GetStream/stream-chat-react-native/blob/master/examples/NativeMessaging/App.js) to see usage of components.
 
 OR you can swap this file for your `App.js` in root folder with additional following steps:
 
@@ -184,7 +189,7 @@ Just to be sure, please verify you are using appropriate version of following pa
 
 - react-native-image-picker : https://github.com/react-native-community/react-native-image-picker#react-native-compatibility
 
-Please check [Example](https://github.com/GetStream/stream-chat-react-native/blob/master/examples/two/App.js) to see usage of components.
+Please check [Example](https://github.com/GetStream/stream-chat-react-native/blob/master/examples/NativeMessaging/App.js) to see usage of components.
 
 OR you can swap this file for your `App.js` in root folder with additional following steps:
 
@@ -248,7 +253,7 @@ In current context, dependencies such as `react-native-document-picker` and (if
 1. When you execute `react-native run-ios` for the first time, it starts a metro bundler in parallel. It can result into some errors, since build process isn't complete yet. Try the following to fix this:
    1. Close/stop the metro bundler process.
    2. Let the build process finish completely, it can take usually around 2-3 minutes for the first time.
-   3. Start the metro bundler manually by executing `yarn start` inside `stream-chat-react-native/examples/two` directory.
+   3. Start the metro bundler manually by executing `yarn start` inside `stream-chat-react-native/examples/NativeMessaging` directory.
 2. When you execute `react-native run-android`, you may (not necessarily) run into following error:
 
    ```ERROR
@@ -277,9 +282,9 @@ In current context, dependencies such as `react-native-document-picker` and (if
 
    To resolve this, do the following
 
-   1. Craete a file named `local.properties` inside `stream-chat-react-native/examples/two/android` directory
+   1. Craete a file named `local.properties` inside `stream-chat-react-native/examples/NativeMessaging/android` directory
    2. Put the this line in that file. Make sure sdk path is correctly mentioned as per your system:
       ```
       sdk.dir=/Users/{user_name}/Library/Android/sdk/
       ```
-   3. Rerun `react-native run-android` in `stream-chat-react-native/examples/two` directory
+   3. Rerun `react-native run-android` in `stream-chat-react-native/examples/NativeMessaging` directory

examples/ExpoMessaging/App.js

@@ -40,7 +40,7 @@ const theme = {
     `,
   },
 };
-  
+
 
 const filters = { type: 'messaging' };
 const sort = { last_message_at: -1 };

expo-package/package.json

@@ -63,6 +63,7 @@
     "stream-chat-react-native-core": "v0.4.0"
   },
   "peerDependencies": {
-    "expo": "^32.0.0"
+    "expo": "^32.0.0",
+    "@react-native-community/netinfo": ">=2.0.7"
   }
 }

expo-package/rollup.config.js

@@ -40,6 +40,7 @@ const normalBundle = {
     'expo-document-picker',
     'expo-permissions',
     'react-native-unimodules',
+    '@react-native-community/netinfo',
   ],
   plugins: [
     replace({

expo-package/src/index.js

@@ -3,7 +3,7 @@
  * And they have been removed from Expo package. But these packages don't work with Expo 32 sdk (because of linking issue).
  */
 import { registerNativeHandlers } from 'stream-chat-react-native-core';
-import { NetInfo } from 'react-native';
+import NetInfo from '@react-native-community/netinfo';
 import { Constants } from 'react-native-unimodules';
 import * as Expo from 'expo';
 
@@ -30,18 +30,38 @@ if (manifest.sdkVersion.split('.')[0] >= 33) {
 registerNativeHandlers({
   NetInfo: {
     addEventListener(listener) {
-      const unsubscribe = NetInfo.addEventListener('connectionChange', () => {
-        NetInfo.isConnected.fetch().then((isConnected) => {
+      let unsubscribe;
+      // For NetInfo >= 3.x.x
+      if (NetInfo.fetch && typeof NetInfo.fetch === 'function') {
+        unsubscribe = NetInfo.addEventListener(({ isConnected }) => {
           listener(isConnected);
         });
-      });
-      return unsubscribe.remove;
+        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) => {
-        NetInfo.isConnected.fetch().then((isConnected) => {
-          resolve(isConnected);
-        }, 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);
+        }
       });
     },
   },