Skip to content

Commit 1cc1876

Browse files
committed
docs: remove RNGH workaround from troubleshooting
1 parent 4d11066 commit 1cc1876

1 file changed

Lines changed: 0 additions & 53 deletions

File tree

docs/docs/troubleshooting.mdx

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,6 @@ keywords: [bottom sheet troubleshooting, fixing bottom sheet, debugging bottom s
66

77
# Troubleshooting
88

9-
## React Native Gesture Handler
10-
11-
[`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/docs/)
12-
13-
On Android, [RNGH does not work](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation/#usage-with-modals-on-android) by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with `GestureHandlerRootView`.
14-
15-
```tsx
16-
import { GestureHandlerRootView } from 'react-native-gesture-handler'
17-
```
18-
19-
```tsx {3-5}
20-
return (
21-
<TrueSheet ref={sheet}>
22-
<GestureHandlerRootView style={{ flexGrow: 1 }}>
23-
<View />
24-
</GestureHandlerRootView>
25-
</TrueSheet>
26-
)
27-
```
28-
29-
:::info
30-
Note that we are using `flexGrow` instead of `flex` here. For some weird reason, `flex` does not work correctly. See [below](#weird-layout-render).
31-
:::
32-
33-
## Touch Events Not Working on Android
34-
35-
On physical Android devices, touch events on buttons and pressables inside TrueSheet may not fire correctly. This appears to be a React Native Fabric limitation with modals.
36-
37-
Related: [#163](https://github.com/lodev09/react-native-true-sheet/issues/163), [#288](https://github.com/lodev09/react-native-true-sheet/issues/288)
38-
39-
**Workarounds:**
40-
41-
1. Use touchable components from [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/docs/) instead of React Native's built-in components.
42-
43-
2. Set an explicit `width` on `GestureHandlerRootView` to fix first-render layout issues:
44-
45-
```tsx
46-
import { useWindowDimensions } from 'react-native'
47-
import { GestureHandlerRootView, TouchableOpacity } from 'react-native-gesture-handler'
48-
49-
const { width } = useWindowDimensions()
50-
51-
return (
52-
<TrueSheet ref={sheet}>
53-
<GestureHandlerRootView style={{ flexGrow: 1, width }}>
54-
<TouchableOpacity onPress={handlePress}>
55-
{/* ... */}
56-
</TouchableOpacity>
57-
</GestureHandlerRootView>
58-
</TrueSheet>
59-
)
60-
```
61-
629
## Keyboard Covering TextInput on Android with Unistyles
6310

6411
When using [`react-native-unistyles`](https://github.com/jpudysz/react-native-unistyles) alongside TrueSheet, the keyboard may cover the TextInput instead of the sheet repositioning itself. This is caused by Unistyles preventing TrueSheet from observing keyboard animation events on Android.

0 commit comments

Comments
 (0)