Skip to content

Commit f9eba70

Browse files
vishalnarkhedevishalnarkhede
authored
Merge pull request #1181 from GetStream/khushal87-rngh-troubleshooting-docs
feat: upgrade react native gesture handler version to 2.3.1
2 parents 396edf2 + be8ef08 commit f9eba70

File tree

24 files changed

+753
-813
lines changed

24 files changed

+753
-813
lines changed

‎docusaurus/docs/reactnative/basics/getting_started.mdx‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -99,29 +99,56 @@ To be able to use the Stream Chat React Native SDK, a few dependencies must meet
9999

100100
### Additional Steps
101101

102-
- `react-native` - [additional installation steps](https://reactnative.dev/docs/image#gif-and-webp-support-on-android)
103-
- `react-native-reanimated` - [additional installation steps](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation).
104-
- `react-native-image-crop-picker` - [additional installation steps](https://github.com/ivpusic/react-native-image-crop-picker#step-3)
105-
- `react-native-cameraroll` - [additional installation steps](https://github.com/react-native-cameraroll/react-native-cameraroll#permissions)
102+
For some of the packages listed below, there are additional steps required to setup the package:
103+
104+
- `react-native-reanimated` - [additional installation steps](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)
105+
106+
Add Reanimated's babel plugin to your babel.config.js:
107+
108+
```js
109+
module.exports = {
110+
...
111+
plugins: [
112+
...
113+
'react-native-reanimated/plugin',
114+
],
115+
};
116+
```
117+
106118
- `react-native-gesture-handler` - [additional installation steps](https://docs.swmansion.com/react-native-gesture-handler/docs/#android)
107119

108-
:::info
120+
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.
109121

110-
`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.
122+
```tsx
123+
import 'react-native-gesture-handler';
124+
import { AppRegistry } from 'react-native';
111125

112-
<br />
126+
import App from './App';
127+
import { name as appName } from './app.json';
113128

114-
```tsx
115-
import 'react-native-gesture-handler';
116-
import { AppRegistry } from 'react-native';
129+
AppRegistry.registerComponent(appName, () => App);
130+
```
117131

118-
import App from './App';
119-
import { name as appName } from './app.json';
132+
Also wrap your entry point with `<GestureHandlerRootView>` or `gestureHandlerRootHO`
120133

121-
AppRegistry.registerComponent(appName, () => App);
122-
```
134+
```jsx
135+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
136+
import { OverlayProvider } from 'stream-chat-react-native';
123137

124-
:::
138+
export default function App() {
139+
return (
140+
<GestureHandlerRootView>
141+
<OverlayProvider>{/* Your app code goes here */}</OverlayProvider>
142+
</GestureHandlerRootView>
143+
);
144+
}
145+
```
146+
147+
Please take a look at our Example Application for reference.
148+
149+
- `react-native` - [additional installation steps](https://reactnative.dev/docs/image#gif-and-webp-support-on-android)
150+
- `react-native-image-crop-picker` - [additional installation steps](https://github.com/ivpusic/react-native-image-crop-picker#step-3)
151+
- `react-native-cameraroll` - [additional installation steps](https://github.com/react-native-cameraroll/react-native-cameraroll#permissions)
125152

126153
:::note
127154

‎docusaurus/docs/reactnative/basics/troubleshooting.mdx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,13 @@ client.on('channel.deleted', event => {
263263
## Touchables not working
264264

265265
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.
266+
267+
:::note
268+
269+
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.
270+
271+
:::
272+
266273
Be sure to follow all needed [additional steps](https://docs.swmansion.com/react-native-gesture-handler/docs/) to complete the installation.
267274

268275
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
271278
import 'react-native-gesture-handler';
272279
```
273280

274-
And for Android you additionally need to update `MainActivity.java` to override the method for creating the `ReactRootView`.
281+
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.
282+
283+
```tsx
284+
<GestureHandlerRootView style={{ flex: 1 }}>
285+
<OverlayProvider>// Other underlying components</OverlayProvider>
286+
</GestureHandlerRootView>
287+
```
288+
289+
If you are using v1 of `react-native-gesture-handler` library, then you will need extra setup steps for Android.
290+
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).
275291

276292
```java {4-6,13-21}
277293
package com.swmansion.gesturehandler.react.example;
@@ -298,10 +314,13 @@ public class MainActivity extends ReactActivity {
298314
}
299315
```
300316
301-
## Custom touchable not working
317+
## Touchables Inside Custom Components Are Not Working
302318
303319
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/).
304-
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.
320+
The following could be the reasons behind the issues you might be facing:
321+
322+
- Your component may be being rendered inside of a gesture handler.
323+
- 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).
305324
306325
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.
307326
The solution may require using a different touchable from React Native Gesture Handler and React Native depending on the platform.

‎examples/ExpoMessaging/App.js‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
} from 'stream-chat-expo';
2020

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

2324
LogBox.ignoreAllLogs(true);
2425

@@ -154,41 +155,43 @@ const App = () => {
154155
}}
155156
>
156157
<AppContext.Provider value={{ channel, setChannel, setThread, thread }}>
157-
<OverlayProvider
158-
bottomInset={bottom}
159-
i18nInstance={streami18n}
160-
translucentStatusBar
161-
value={{ style: theme }}
162-
>
163-
{clientReady && (
164-
<Stack.Navigator
165-
initialRouteName='ChannelList'
166-
screenOptions={{
167-
headerTitleStyle: { alignSelf: 'center', fontWeight: 'bold' },
168-
}}
169-
>
170-
<Stack.Screen
171-
component={ChannelScreen}
172-
name='Channel'
173-
options={() => ({
174-
headerBackTitle: 'Back',
175-
headerRight: () => <></>,
176-
headerTitle: channel?.data?.name,
177-
})}
178-
/>
179-
<Stack.Screen
180-
component={ChannelListScreen}
181-
name='ChannelList'
182-
options={{ headerTitle: 'Channel List' }}
183-
/>
184-
<Stack.Screen
185-
component={ThreadScreen}
186-
name='Thread'
187-
options={() => ({ headerLeft: () => <></> })}
188-
/>
189-
</Stack.Navigator>
190-
)}
191-
</OverlayProvider>
158+
<GestureHandlerRootView style={{ flex: 1 }}>
159+
<OverlayProvider
160+
bottomInset={bottom}
161+
i18nInstance={streami18n}
162+
translucentStatusBar
163+
value={{ style: theme }}
164+
>
165+
{clientReady && (
166+
<Stack.Navigator
167+
initialRouteName='ChannelList'
168+
screenOptions={{
169+
headerTitleStyle: { alignSelf: 'center', fontWeight: 'bold' },
170+
}}
171+
>
172+
<Stack.Screen
173+
component={ChannelScreen}
174+
name='Channel'
175+
options={() => ({
176+
headerBackTitle: 'Back',
177+
headerRight: () => <></>,
178+
headerTitle: channel?.data?.name,
179+
})}
180+
/>
181+
<Stack.Screen
182+
component={ChannelListScreen}
183+
name='ChannelList'
184+
options={{ headerTitle: 'Channel List' }}
185+
/>
186+
<Stack.Screen
187+
component={ThreadScreen}
188+
name='Thread'
189+
options={() => ({ headerLeft: () => <></> })}
190+
/>
191+
</Stack.Navigator>
192+
)}
193+
</OverlayProvider>
194+
</GestureHandlerRootView>
192195
</AppContext.Provider>
193196
</NavigationContainer>
194197
);

0 commit comments

Comments
 (0)