feat: upgrade react native gesture handler version to 2.3.1 by khushal87 · Pull Request #1181 · GetStream/stream-chat-react-native

khushal87 · 2022-03-04T12:37:59Z

🎯 Goal

This PR focuses on upgrading the react-native-gesture-handler version to 2.3.1 for example applications and improving the React native gesture handler troubleshooting guide to help customers with the issues they might face with the package.

🛠 Implementation details

Upgrade the dependency react-native-gesture-handler to 2.3.1 and documentation update.

🎨 UI Changes

iOS

Before	After

Android

Before	After

🧪 Testing

☑️ Checklist

I have signed the Stream CLA (required)
PR targets the develop branch
Commits follow the conventional commits spec
New code is covered by tests
Screenshots added for visual changes
Documentation is updated

khushal87 · 2022-03-04T12:39:20Z

@vishalnarkhede Let me know if I am missing out on something. 😄

vishalnarkhede · 2022-03-07T12:15:22Z

docusaurus/docs/reactnative/basics/troubleshooting.mdx

 ```

-## Custom touchable not working
+## Touchables not working


I was just scrolling through this file, and apparently we already have a section called "Touchables Not Working". We should merge those two. That section is about v1 of RNGH. We can just include instructions about v2 there and leave this section as "Custom Touchable Not Working"

docs: improve react native-gesture-handler troubleshooting guide

…hal87-rngh-troubleshooting-docs

…com/GetStream/stream-chat-react-native into khushal87-rngh-troubleshooting-docs

…nd example app

vishalnarkhede · 2022-03-10T09:14:29Z

package/src/components/AttachmentPicker/components/AttachmentSelectionBar.tsx

  return (
    <View style={[styles.container, container, { height: attachmentSelectionBarHeight ?? 52 }]}>
      <TouchableOpacity
+        accessibilityLabel='upload-photo-touchable'


This sounds wrong.

https://reactnative.dev/docs/accessibility#accessibilitylabel

When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.

Ideally it should be something sensible that voice over can read!!

But adding these labels only for 2-3 views for the sake of testing doesn't sound good as well.

And seems like RNGH 2.3.1 is out ;)

https://github.com/software-mansion/react-native-gesture-handler/releases

…com/GetStream/stream-chat-react-native into khushal87-rngh-troubleshooting-docs

vishalnarkhede · 2022-03-10T10:54:23Z

examples/SampleApp/ios/Podfile

    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
-    :hermes_enabled => true
+    :hermes_enabled => false


why are we disabling hermes?

Since the app crashes on iOS for RN version 0.66 if Hermes is enabled. I think we discussed it over call. When we upgrade to 0.67 that might solve the problem and we can go for true

And whats the reason for it?

vishalnarkhede · 2022-03-10T10:57:30Z

examples/NativeMessaging/App.js

 } from 'stream-chat-react-native';

 import { useStreamChatTheme } from './useStreamChatTheme';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';


It would be better if you remove changes from NativeMessaging app, since we are dropping this app in #1199

vishalnarkhede · 2022-03-13T17:42:14Z

One more thing, please check what breaking changes were introduced in RNGH v2 and if we need to make any changes to SDK for that.

khushal87 · 2022-03-14T10:02:21Z

After going through the docs, I don't find anything which affects our SDK except for the warning which comes up while running the app:

[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!
    at PanGestureHandler (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:112545:38)
    at BottomSheetDraggableView (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:230469:32)
    at RCTView
    at View
    at AnimatedComponent(View) (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:116101:38)
    at RCTView
    at View
    at AnimatedComponent(View) (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:116101:38)
    at RCTView
    at View
    at BottomSheetContainer (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:229700:31)
    at BottomSheetGestureHandlersProvider (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:229822:37)
    at BottomSheet (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:222775:34)
    at AttachmentPicker (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:222254:50)
    at ThemeProvider (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:163790:25)
    at ImageGalleryProvider (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:217366:24)
    at AttachmentPickerProvider (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:232759:24)
    at MessageOverlayProvider (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:264942:24)
    at TranslationProvider (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:233263:24)
    at OverlayProvider (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:304569:38)
    at RCTView
    at View
    at GestureHandlerRootView
    at DrawerNavigatorWrapper (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:141732:26)
    at EnsureSingleNavigator (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:144018:24)
    at BaseNavigationContainer (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:143643:28)
    at ThemeProvider (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:148082:21)
    at NavigationContainer (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:147986:26)
    at RNCSafeAreaProvider
    at SafeAreaProvider (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:149504:24)
    at App (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:141612:60)
    at RCTView
    at View
    at RCTView
    at View
    at AppContainer (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:78113:36)
    at SampleApp(RootComponent) (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=io.getstream.reactnative.SampleApp:85384:28)

and this is because of the bottom-sheet package as they are still in ^1.10.3:

https://github.com/gorhom/react-native-bottom-sheet/blob/master/package.json#L65
@vishalnarkhede

vishalnarkhede · 2022-03-17T16:32:59Z

🎉 This PR is included in version 4.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

khushal87 requested a review from vishalnarkhede March 4, 2022 12:38

vishalnarkhede reviewed Mar 7, 2022

View reviewed changes

docs: improve react native gesture handler troubleshooting guide

dea1580

docs: improve react native-gesture-handler troubleshooting guide

khushal87 force-pushed the khushal87-rngh-troubleshooting-docs branch from f3612a4 to dea1580 Compare March 8, 2022 05:46

vishalnarkhede and others added 4 commits March 8, 2022 10:48

docs: updated additional installation steps guide

dba21d6

Merge https://github.com/GetStream/stream-chat-react-native into khus…

296caf7

…hal87-rngh-troubleshooting-docs

Merge branch 'khushal87-rngh-troubleshooting-docs' of https://github.…

ec8cd70

…com/GetStream/stream-chat-react-native into khushal87-rngh-troubleshooting-docs

chore: upgrade react-native-gesture-handler version to 2.3.0 in SDK a…

b081c25

…nd example app

khushal87 changed the title ~~Docs: Improve react native gesture handler troubleshooting guide~~ chore: upgrade react native gesture handler version to 2.3.0 Mar 9, 2022

khushal87 requested a review from vishalnarkhede March 9, 2022 11:32

Merge branch 'develop' into khushal87-rngh-troubleshooting-docs

bb97ae6

vishalnarkhede reviewed Mar 10, 2022

View reviewed changes

khushal87 added 3 commits March 10, 2022 15:27

chore: upgrade rngh to 2.3.1 and update tests

191321f

Merge branch 'khushal87-rngh-troubleshooting-docs' of https://github.…

995c044

…com/GetStream/stream-chat-react-native into khushal87-rngh-troubleshooting-docs

fix: tests around own capabilities and markdown

64f8036

khushal87 changed the title ~~chore: upgrade react native gesture handler version to 2.3.0~~ chore: upgrade react native gesture handler version to 2.3.1 Mar 10, 2022

vishalnarkhede requested changes Mar 10, 2022

View reviewed changes

khushal87 added 2 commits March 13, 2022 14:42

chore: resolve merge conflicts

340baf6

refactor: remove nativemessaging files and upgrade dependencies

be8ef08

vishalnarkhede approved these changes Mar 15, 2022

View reviewed changes

vishalnarkhede changed the title ~~chore: upgrade react native gesture handler version to 2.3.1~~ feat: upgrade react native gesture handler version to 2.3.1 Mar 15, 2022

vishalnarkhede merged commit f9eba70 into develop Mar 15, 2022

vishalnarkhede deleted the khushal87-rngh-troubleshooting-docs branch March 15, 2022 14:47

vishalnarkhede added the Released label Mar 17, 2022

Conversation

khushal87 commented Mar 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Goal

🛠 Implementation details

🎨 UI Changes

🧪 Testing

☑️ Checklist

Uh oh!

khushal87 commented Mar 4, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khushal87 Mar 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khushal87 Mar 10, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vishalnarkhede commented Mar 13, 2022

Uh oh!

khushal87 commented Mar 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vishalnarkhede commented Mar 17, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

khushal87 commented Mar 4, 2022 •

edited

Loading

khushal87 Mar 10, 2022 •

edited

Loading

khushal87 Mar 10, 2022 •

edited

Loading

khushal87 commented Mar 14, 2022 •

edited

Loading