Merge branch 'develop' into khushal87-crns-430

Author: vanGalilea

docusaurus/docs/reactnative/basics/getting_started.mdx

@@ -16,7 +16,7 @@ This should be considered a primer before delving into the UI and Core Component
 
 Your [environment should be setup](https://reactnative.dev/docs/environment-setup) and a project created prior to beginning the installation.
 
-### Add dependencies
+### Add Required dependencies
 
 Install the required packages in your React Native project.
 
@@ -151,14 +151,22 @@ For some of the packages listed below, there are additional steps required to se
 - `react-native` - [additional installation steps](https://reactnative.dev/docs/image#gif-and-webp-support-on-android)
 - `react-native-image-crop-picker` - [additional installation steps](https://github.com/ivpusic/react-native-image-crop-picker#step-3)
 - `react-native-cameraroll` - [additional installation steps](https://github.com/react-native-cameraroll/react-native-cameraroll#permissions)
-- `react-native-video` - [additional installation steps](https://github.com/react-native-video/react-native-video/blob/master/API.md#installation)
 
 :::note
 
 If you are planning to use file picker functionality, make sure you enable iCloud capability in your app - [Enable iCloud capability](https://camo.githubusercontent.com/ac300ca7e3bbab573a76c151469a89efd8b31e72/68747470733a2f2f33313365353938373731386233343661616638332d66356538323532373066323961383466373838313432333431303338343334322e73736c2e6366312e7261636b63646e2e636f6d2f313431313932303637342d656e61626c652d69636c6f75642d64726976652e706e67)
 
 :::
 
+### Add Optional Dependencies
+
+- `react-native-video` - [additional installation steps](https://github.com/react-native-video/react-native-video/blob/master/API.md#installation)
+
+  > Available in stream-chat-react-native >= v4.7.0
+
+  Installing this package allows you to play the video files/attachments in the chat. Otherwise by default, video files will be opened in default
+  browser of the device.
+
 ### AndroidX Support
 
 > AndroidX is a major step forward in the Android ecosystem, and the old support library artifacts are being deprecated.
@@ -172,9 +180,67 @@ But an awesome tool named [jetifier](https://github.com/mikehardy/jetifier) is q
 
 ## Expo Installation
 
-Stream Chat for React Native is set up for parity on Expo, expo requires a different set of dependencies than bare React Native, in your project directory run:
+Stream Chat for React Native is set up for parity on Expo, expo requires a different set of dependencies than bare React Native, in your project directory run.
+
+### Add Required Dependencies
 
 ```bash
 expo install stream-chat-expo
 expo install @react-native-community/netinfo expo-document-picker expo-file-system expo-haptics expo-image-manipulator expo-image-picker expo-media-library expo-sharing react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg expo-av
 ```
+
+### Additional Steps
+
+For some of the packages listed below, there are additional steps required to setup the package:
+
+- `react-native-reanimated` - [additional installation steps](https://docs.expo.dev/versions/latest/sdk/reanimated/#installation)
+
+  Add Reanimated's babel plugin to your babel.config.js:
+
+  ```js
+    module.exports = {
+        ...
+        plugins: [
+            ...
+            'react-native-reanimated/plugin',
+        ],
+    };
+  ```
+
+- `react-native-gesture-handler` - [additional installation steps](https://docs.expo.dev/versions/latest/sdk/gesture-handler/#api)
+
+  RNGH requires the package to be imported at the **top of the entry file** before anything else, this is usually your `App.js` or `index.js` file.
+
+  ```tsx
+  import 'react-native-gesture-handler';
+  import { AppRegistry } from 'react-native';
+
+  import App from './App';
+  import { name as appName } from './app.json';
+
+  AppRegistry.registerComponent(appName, () => App);
+  ```
+
+  Also wrap your entry point with `<GestureHandlerRootView>` or `gestureHandlerRootHO`
+
+  ```jsx
+  import { GestureHandlerRootView } from 'react-native-gesture-handler';
+  import { OverlayProvider } from 'stream-chat-react-native';
+
+  export default function App() {
+    return (
+      <GestureHandlerRootView>
+        <OverlayProvider>{/* Your app code goes here */}</OverlayProvider>
+      </GestureHandlerRootView>
+    );
+  }
+  ```
+
+### Add Optional Dependencies
+
+- `expo-av` - [additional installation steps](https://docs.expo.dev/versions/v45.0.0/sdk/video/)
+
+  > Available in stream-chat-expo >= v4.7.0
+
+  Installing this package allows you to play the video files/attachments in the chat. Otherwise by default, video files will be opened in default
+  browser of the device.

examples/SampleApp/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## [1.7.0](https://github.com/GetStream/stream-chat-react-native/compare/[email protected]@v1.7.0) (2022-06-07)
+
+
+### Features
+
+* allow video upload from image picker and file picker ([6009d36](https://github.com/GetStream/stream-chat-react-native/commit/6009d3626bed416c1bd043fbf1c6ebb156186677))
+* inline video renderer/player support for SDK ([862c4bb](https://github.com/GetStream/stream-chat-react-native/commit/862c4bb990f98f26c6c81e2335692569a44018b9))
+
+
+### Workspaces
+
+* Following linked packages updated: [stream-chat-react-native]
+
 ### [1.6.1](https://github.com/GetStream/stream-chat-react-native/compare/[email protected]@v1.6.1) (2022-05-25)
 
 

examples/SampleApp/ios/SampleApp.xcodeproj/project.pbxproj

@@ -514,7 +514,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = SampleApp/SampleAppDebug.entitlements;
 				CODE_SIGN_IDENTITY = "iPhone Developer";
-				CURRENT_PROJECT_VERSION = 110;
+				CURRENT_PROJECT_VERSION = 116;
 				DEVELOPMENT_TEAM = EHV7XZLAHA;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = SampleApp/Info.plist;
@@ -545,7 +545,7 @@
 				CODE_SIGN_ENTITLEMENTS = SampleApp/SampleAppRelease.entitlements;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 110;
+				CURRENT_PROJECT_VERSION = 116;
 				DEVELOPMENT_TEAM = EHV7XZLAHA;
 				INFOPLIST_FILE = SampleApp/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (

examples/SampleApp/ios/SampleApp/Info.plist

@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.5.0</string>
+	<string>1.6.1</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>110</string>
+	<string>116</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true />
 	<key>NSAppTransportSecurity</key>

examples/SampleApp/ios/SampleAppTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.5.0</string>
+	<string>1.6.1</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>110</string>
+	<string>116</string>
 </dict>
 </plist>

examples/SampleApp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sampleapp",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "private": true,
   "repository": {
     "type": "git",

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## [4.7.0](https://github.com/GetStream/stream-chat-react-native/compare/v4.6.1...v4.7.0) (2022-06-07)
+
+
+### Features
+
+* ability to customize onPress handler for urls ([e5b840f](https://github.com/GetStream/stream-chat-react-native/commit/e5b840f07983c71cc58322194c5b62ebbefa9252))
+* allow video upload from image picker and file picker ([6009d36](https://github.com/GetStream/stream-chat-react-native/commit/6009d3626bed416c1bd043fbf1c6ebb156186677))
+* inline video renderer/player support for SDK ([862c4bb](https://github.com/GetStream/stream-chat-react-native/commit/862c4bb990f98f26c6c81e2335692569a44018b9))
+
+
+### Bug Fixes
+
+* correctly truncate channel name in useChannelPreviewDisplayName ([cdabaa3](https://github.com/GetStream/stream-chat-react-native/commit/cdabaa3682747c3590df37a2ad86380c67e0ef29))
+* filePicker appearing issue on tapping the attachment picker icon after file is selected ([ae19950](https://github.com/GetStream/stream-chat-react-native/commit/ae19950b397b5e999e10c9ae7f1a41ad5dfdec12))
+* issue with the link text overflowing the reply view ([1c5aa3e](https://github.com/GetStream/stream-chat-react-native/commit/1c5aa3eac161f115a4c6799dfecd48966f770c06))
+* issues with video upload in expo from attachment picker and component displayname ([d8d621d](https://github.com/GetStream/stream-chat-react-native/commit/d8d621d0754d0d7962791a8756142955b2d661d6))
+* smart gallery rendering while optimistically adding a message to list ([748f36b](https://github.com/GetStream/stream-chat-react-native/commit/748f36b7db4ce69c8d39cad24d9588359b6346f3))
+
 ### [4.6.1](https://github.com/GetStream/stream-chat-react-native/compare/v4.6.0...v4.6.1) (2022-05-25)
 
 

package/expo-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": "4.6.1",
+  "version": "4.7.0",
   "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": "4.6.1"
+    "stream-chat-react-native-core": "4.7.0"
   },
   "peerDependencies": {
     "@react-native-community/netinfo": "^6.0.0",
@@ -23,6 +23,9 @@
     "expo-media-library": "^12.0.2",
     "expo-sharing": "^9.1.2"
   },
+  "optionalDependencies": {
+    "expo-av": "^11.2.3"
+  },
   "scripts": {
     "prepack": " cp ../../README.md .",
     "postpack": "rm README.md"

package/expo-package/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { FlatList, Image, Platform } from 'react-native';
 
 import NetInfo from '@react-native-community/netinfo';
-import { Video as ExpoVideoPlayer } from 'expo-av';
+
 import * as DocumentPicker from 'expo-document-picker';
 import * as FileSystem from 'expo-file-system';
 import * as Haptics from 'expo-haptics';
@@ -12,6 +12,8 @@ import * as MediaLibrary from 'expo-media-library';
 import * as Sharing from 'expo-sharing';
 import { registerNativeHandlers } from 'stream-chat-react-native-core';
 
+import ExpoVideoPlayer from './optionalDependencies/Video';
+
 registerNativeHandlers({
   compressImage: async ({ compressImageQuality = 1, uri }) => {
     const { uri: compressedUri } = await ImageManipulator.manipulateAsync(uri, [], {
@@ -220,18 +222,18 @@ registerNativeHandlers({
     }
   },
   // eslint-disable-next-line react/display-name
-  Video: ({ onPlaybackStatusUpdate, paused, style, uri, videoRef }) => (
-    <ExpoVideoPlayer
-      onPlaybackStatusUpdate={onPlaybackStatusUpdate}
-      ref={videoRef}
-      resizeMode='contain'
-      shouldPlay={!paused}
-      source={{
-        uri,
-      }}
-      style={[style]}
-    />
-  ),
+  Video: ExpoVideoPlayer ? ({ onPlaybackStatusUpdate, paused, style, uri, videoRef }) => (
+      <ExpoVideoPlayer
+        onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+        ref={videoRef}
+        resizeMode='contain'
+        shouldPlay={!paused}
+        source={{
+          uri,
+        }}
+        style={[style]}
+      />
+    ) : null,
 });
 
 export * from 'stream-chat-react-native-core';

package/expo-package/src/optionalDependencies/Video.ts

@@ -0,0 +1,11 @@
+let VideoComponent;
+try {
+  const videoPackage = require('expo-av');
+  VideoComponent = videoPackage.Video;
+} catch (_) {
+  console.warn(
+    'Video library is currently not installed. To allow in-app video playback, install the "expo-av" package.',
+  );
+}
+
+export default VideoComponent;