Merge pull request #1210 from GetStream/develop

Next Release

Author: vishalnarkhede

docusaurus/docs/reactnative/basics/getting_started.mdx

@@ -99,29 +99,56 @@ To be able to use the Stream Chat React Native SDK, a few dependencies must meet
 
 ### Additional Steps
 
-- `react-native` - [additional installation steps](https://reactnative.dev/docs/image#gif-and-webp-support-on-android)
-- `react-native-reanimated` - [additional installation steps](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
-- `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)
+For some of the packages listed below, there are additional steps required to setup the package:
+
+- `react-native-reanimated` - [additional installation steps](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/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.swmansion.com/react-native-gesture-handler/docs/#android)
 
-:::info
+  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.
 
-`react-native-gesture-handler` 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';
 
-<br />
+  import App from './App';
+  import { name as appName } from './app.json';
 
-```tsx
-import 'react-native-gesture-handler';
-import { AppRegistry } from 'react-native';
+  AppRegistry.registerComponent(appName, () => App);
+  ```
 
-import App from './App';
-import { name as appName } from './app.json';
+  Also wrap your entry point with `<GestureHandlerRootView>` or `gestureHandlerRootHO`
 
-AppRegistry.registerComponent(appName, () => App);
-```
+  ```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>
+    );
+  }
+  ```
+
+  Please take a look at our Example Application for reference.
+
+- `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)
 
 :::note
 

docusaurus/docs/reactnative/basics/troubleshooting.mdx

@@ -263,6 +263,13 @@ client.on('channel.deleted', event => {
 ## Touchables not working
 
 If you are having trouble with pressing, swiping, or otherwise interacting with components it is likely the result of [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) not being properly setup.
+
+:::note
+
+If your React Native version is (>=0.68) you will need a version of >=2.0.0 for `react-native-gesture-handler` for your app to build.
+
+:::
+
 Be sure to follow all needed [additional steps](https://docs.swmansion.com/react-native-gesture-handler/docs/) to complete the installation.
 
 This includes ensuring you import `react-native-gesture-handler` at the top of your app entry file.
@@ -271,7 +278,16 @@ This includes ensuring you import `react-native-gesture-handler` at the top of y
 import 'react-native-gesture-handler';
 ```
 
-And for Android you additionally need to update `MainActivity.java` to override the method for creating the `ReactRootView`.
+Also do not forget to wrap your component tree(probably above `OverlayProvider`) with `<GestureHandlerRootView>` or `gestureHandlerRootHOC` as mentioned in [RNGH Installation docs](https://docs.swmansion.com/react-native-gesture-handler/docs/installation#js). Not doing so, can cause unusual behaviour with the `MessageOverlay` and `Imagegallery` gestures.
+
+```tsx
+<GestureHandlerRootView style={{ flex: 1 }}>
+  <OverlayProvider>// Other underlying components</OverlayProvider>
+</GestureHandlerRootView>
+```
+
+If you are using v1 of `react-native-gesture-handler` library, then you will need extra setup steps for Android.
+Update `MainActivity.java` to override the method for creating the `ReactRootView` as mentioned in [RNGH Installation docs](https://docs.swmansion.com/react-native-gesture-handler/docs/installation#js).
 
 ```java {4-6,13-21}
 package com.swmansion.gesturehandler.react.example;
@@ -298,10 +314,13 @@ public class MainActivity extends ReactActivity {
 }
 ```
 
-## Custom touchable not working
+## Touchables Inside Custom Components Are Not Working
 
 If you find that a customization that includes a touchable is not working, or the wrong element is receiving the touch event, this is likely related to [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/).
-Your component may be being rendered inside of a gesture handler; nested gesture handlers and touchables need special treatment and can act differently on iOS & Android.
+The following could be the reasons behind the issues you might be facing:
+
+- Your component may be being rendered inside of a gesture handler.
+- Nested gesture handlers and touchables need special treatment and can act differently on iOS & Android. If you want Nested Touchables to work on Android you should add the prop `disallowInterruption` as mentioned [here](https://github.com/software-mansion/react-native-gesture-handler/issues/784#issuecomment-786471220).
 
 There are solutions available for almost all use cases so looking into your specific use case in relation to React Native Gesture Handler is suggested.
 The solution may require using a different touchable from React Native Gesture Handler and React Native depending on the platform.

docusaurus/docs/reactnative/common-content/core-components/channel/props/giphy_version.mdx

@@ -0,0 +1,5 @@
+The Giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values.
+
+| Type   | Default        |
+| ------ | -------------- |
+| string | 'fixed_height' |

docusaurus/docs/reactnative/contexts/messages_context.mdx

@@ -23,6 +23,7 @@ import ForceAlignMessages from '../common-content/core-components/channel/props/
 import FormatDate from '../common-content/core-components/channel/props/format_date.mdx';
 import Gallery from '../common-content/core-components/channel/props/gallery.mdx';
 import Giphy from '../common-content/core-components/channel/props/giphy.mdx';
+import GiphyVersion from '../common-content/core-components/channel/props/giphy_version.mdx';
 import HandleBlock from '../common-content/core-components/channel/props/handle_block.mdx';
 import HandleCopy from '../common-content/core-components/channel/props/handle_copy.mdx';
 import HandleDelete from '../common-content/core-components/channel/props/handle_delete.mdx';
@@ -291,6 +292,10 @@ Upserts a given message in local channel state. Please note that this function d
 
 <Giphy />
 
+### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#giphyversion)_ props</div> giphyVersion {#giphyversion}
+
+<GiphyVersion />
+
 ### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#inlinedateseparator)_ props</div> InlineDateSeparator {#inlinedateseparator}
 
 <InlineDateSeparator />

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -49,6 +49,7 @@ import FormatDate from '../common-content/core-components/channel/props/format_d
 import Gallery from '../common-content/core-components/channel/props/gallery.mdx';
 import Giphy from '../common-content/core-components/channel/props/giphy.mdx';
 import GiphyEnabled from '../common-content/core-components/channel/props/giphy_enabled.mdx';
+import GiphyVersion from '../common-content/core-components/channel/props/giphy_version.mdx';
 import HandleBlock from '../common-content/core-components/channel/props/handle_block.mdx';
 import HandleCopy from '../common-content/core-components/channel/props/handle_copy.mdx';
 import HandleDelete from '../common-content/core-components/channel/props/handle_delete.mdx';
@@ -436,6 +437,10 @@ The max allowable is 255, which when reached displays as `255+`.
 | ------ | ------- |
 | number | 255     |
 
+### giphyVersion
+
+<GiphyVersion />
+
 ### handleBlock
 
 <HandleBlock />

examples/ExpoMessaging/.gitignore

@@ -12,3 +12,64 @@ web-report/
 
 # macOS
 .DS_Store
+
+# @generated expo-cli sync-e7dcf75f4e856f7b6f3239b3f3a7dd614ee755a8
+# The following patterns were generated by expo-cli
+
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+# Expo
+.expo/
+web-build/
+dist/
+
+# @end expo-cli

examples/ExpoMessaging/App.js

@@ -19,6 +19,7 @@ import {
 } from 'stream-chat-expo';
 
 import { useStreamChatTheme } from './useStreamChatTheme';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 LogBox.ignoreAllLogs(true);
 
@@ -154,41 +155,43 @@ const App = () => {
       }}
     >
       <AppContext.Provider value={{ channel, setChannel, setThread, thread }}>
-        <OverlayProvider
-          bottomInset={bottom}
-          i18nInstance={streami18n}
-          translucentStatusBar
-          value={{ style: theme }}
-        >
-          {clientReady && (
-            <Stack.Navigator
-              initialRouteName='ChannelList'
-              screenOptions={{
-                headerTitleStyle: { alignSelf: 'center', fontWeight: 'bold' },
-              }}
-            >
-              <Stack.Screen
-                component={ChannelScreen}
-                name='Channel'
-                options={() => ({
-                  headerBackTitle: 'Back',
-                  headerRight: () => <></>,
-                  headerTitle: channel?.data?.name,
-                })}
-              />
-              <Stack.Screen
-                component={ChannelListScreen}
-                name='ChannelList'
-                options={{ headerTitle: 'Channel List' }}
-              />
-              <Stack.Screen
-                component={ThreadScreen}
-                name='Thread'
-                options={() => ({ headerLeft: () => <></> })}
-              />
-            </Stack.Navigator>
-          )}
-        </OverlayProvider>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <OverlayProvider
+            bottomInset={bottom}
+            i18nInstance={streami18n}
+            translucentStatusBar
+            value={{ style: theme }}
+          >
+            {clientReady && (
+              <Stack.Navigator
+                initialRouteName='ChannelList'
+                screenOptions={{
+                  headerTitleStyle: { alignSelf: 'center', fontWeight: 'bold' },
+                }}
+              >
+                <Stack.Screen
+                  component={ChannelScreen}
+                  name='Channel'
+                  options={() => ({
+                    headerBackTitle: 'Back',
+                    headerRight: () => <></>,
+                    headerTitle: channel?.data?.name,
+                  })}
+                />
+                <Stack.Screen
+                  component={ChannelListScreen}
+                  name='ChannelList'
+                  options={{ headerTitle: 'Channel List' }}
+                />
+                <Stack.Screen
+                  component={ThreadScreen}
+                  name='Thread'
+                  options={() => ({ headerLeft: () => <></> })}
+                />
+              </Stack.Navigator>
+            )}
+          </OverlayProvider>
+        </GestureHandlerRootView>
       </AppContext.Provider>
     </NavigationContainer>
   );

examples/ExpoMessaging/android/app/BUCK

@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
+
+lib_deps = []
+
+create_aar_targets(glob(["libs/*.aar"]))
+
+create_jar_targets(glob(["libs/*.jar"]))
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "io.stream.expomessaging",
+)
+
+android_resource(
+    name = "res",
+    package = "io.stream.expomessaging",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)