Skip to content

Commit a4584d9

Browse files
lodev09lodev09
authored
docs: present during mount guide (#59)
* docs: add initialIndex + react-navigation troubleshooting and guide * chore: deps
1 parent ecc83c0 commit a4584d9

File tree

13 files changed

+374
-170
lines changed

13 files changed

+374
-170
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,10 @@ cd ios && pod install
3434

3535
## Documentation
3636

37+
- [Example](example)
3738
- [Guides](https://sheet.lodev09.com/category/guides)
3839
- [Reference](https://sheet.lodev09.com/category/reference)
39-
- [Example](example)
40+
- [Troubleshooting]((https://sheet.lodev09.com/troubleshooting))
4041

4142
## Usage
4243

‎docs/docs/guides/dimming/dimming.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Dimming
2+
title: Dimming the Background
33
description: Control the bottom sheet's dimming behavior.
44
keywords: [bottom sheet dimming, bottom sheet background, inline bottom sheet, maps bottom sheet]
55
---

‎docs/docs/guides/jest.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Setup Jest
2+
title: Testing with Jest
33
description: Mocking the bottom sheet component using Jest.
44
keywords: [bottom sheet jest, testing bottom sheet, mocking bottom sheet]
55
---

‎docs/docs/guides/onmount/onmount.gif

2.31 MB
Loading

‎docs/docs/guides/onmount/onmount.mdx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: Presenting During Mount
3+
description: Present the bottom sheet on mount.
4+
keywords: [bottom sheet on mount, bottom sheet initialIndex]
5+
---
6+
7+
import onmount from './onmount.gif'
8+
9+
Sometimes, you may want to present the sheet directly during mount. For example, you might want to present the sheet when a screen is opened through a deep link.
10+
11+
<img alt="onmount" src={onmount} width="300"/>
12+
13+
## How?
14+
15+
You can do this by setting [`initialIndex`](/reference/props#initialindex) prop. It accepts the [`size`](/reference/types#sheetsize) `index` that your sheet is configured with. See [sizes](/reference/props#sizes) prop for more information.
16+
17+
```tsx {5-6}
18+
const App = () => {
19+
return (
20+
<TrueSheet
21+
sizes={['auto', '69%', 'large']}
22+
initialIndex={1}
23+
initialindexanimated
24+
>
25+
<View />
26+
</TrueSheet>
27+
)
28+
}
29+
```
30+
31+
### Disabling Animation
32+
33+
You may want to disable the present animation. To do this, simply set [`initialIndexAnimated`](/reference/props#initialindexanimated) to `false`.
34+
35+
### Using with React Navigation
36+
37+
Using this with [`react-navigation`](https://reactnavigation.org) can cause render issue. Check out the [troubleshooting guide](/troubleshooting#present-during-mount) for the fix 😉.

‎docs/docs/guides/resizing/resizing.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Resizing
2+
title: Resizing Programmatically
33
description: Programmatically resize the bottom sheet and listen for size changes.
44
keywords: [bottom sheet resizing, bottom sheet sizes, bottom sheet auto resizing]
55
---

‎docs/docs/guides/scrolling.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Scrolling
2+
title: Scrolling Content
33
description: Handle scrolling content within the bottom sheet.
44
keywords: [bottom sheet scrolling, bottom sheet scrollview, bottom sheet flatlist]
55
---

‎docs/docs/guides/stacking/stacking.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Stacking
2+
title: Stacking Sheets
33
description: Guide on how to present bottom sheet on top of an existing sheet.
44
keywords: [bottom sheet stacking, multiple bottom sheets, parent bottom sheet, child bottom sheet]
55
---

‎docs/docs/guides/troubleshooting.mdx

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎docs/docs/troubleshooting.mdx

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
sidebar_position: 6
3+
description: Fix common issues when using True Native Bottom Sheet.
4+
keywords: [bottom sheet troubleshooting, fixing bottom sheet, debugging bottom sheet]
5+
---
6+
7+
# Troubleshooting
8+
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
20+
return (
21+
<TrueSheet ref={sheet}>
22+
<GestureHandlerRootView>
23+
<View />
24+
</GestureHandlerRootView>
25+
</TrueSheet>
26+
)
27+
```
28+
29+
## React Navigation
30+
31+
[`react-navigation`](https://reactnavigation.org)
32+
33+
### Navigation Crash
34+
35+
On IOS, navigating to a screen from within the Sheet can cause issues. To resolve this, dismiss the sheet before navigating!
36+
37+
Example:
38+
```tsx
39+
const sheet = useRef<TrueSheet>(null)
40+
41+
const navigate = async () => {
42+
await sheet.current?.dismiss() // wait for the sheet to dismiss ✅
43+
navigation.navigate('SomeScreen') // navigate to the screen 🎉
44+
}
45+
46+
return (
47+
<TrueSheet ref={sheet}>
48+
<Button onPress={navigate} title="Navigate to SomeScreen" />
49+
<View />
50+
</TrueSheet>
51+
)
52+
```
53+
54+
### Present during Mount
55+
56+
On iOS, when setting [`initialIndex`](/reference/props#initialindex) and enabling `initialIndexAnimated` (default is `true`) to present during mount, the presentation animation becomes weird. This happens because RNN is not yet finished when the sheet is trying to present.
57+
58+
To solve this, you can do the following:
59+
60+
1. Set `initialIndexAnimated` to `false`. Disables animation during mount.
61+
62+
```tsx
63+
return (
64+
<TrueSheet initialIndex={0} initialIndexAnimated={false}>
65+
<View />
66+
</TrueSheet>
67+
)
68+
```
69+
70+
2. Wait for the screen to fully transition. See [`transitionEnd`](https://reactnavigation.org/docs/native-stack-navigator/#transitionend) event.
71+
72+
```tsx
73+
const navigation = useNavigation()
74+
const [isScreenShown, setIsScreenShown] = useState(false)
75+
76+
// Subscribe to the transitionEnd event ✅
77+
useEffect(() => {
78+
const unsubscribe = navigation.addListener("transitionEnd", ({ data }) => {
79+
if (!data.closing) {
80+
setIsScreenShown(true)
81+
}
82+
})
83+
84+
return unsubscribe
85+
}, [])
86+
87+
// Wait for the screen to finish transitioning ✅
88+
if (!isScreenShown) return null
89+
90+
// Finally show the sheet 🎉
91+
return (
92+
<TrueSheet initialIndex={0} initialIndexAnimated>
93+
<View />
94+
</TrueSheet>
95+
)
96+
```
97+
98+
## Weird layout render
99+
100+
The sheet does not have control over how React Native renders components and may lead to rendering issues. To resolve this, try to minimize the use of `flex=1` in your content styles. Instead, use fixed `height` or employ `flexGrow`, `flexBasis`, etc., to manage your layout requirements.

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"expo": "~51.0.17",
1717
"expo-build-properties": "~0.12.3",
1818
"react": "18.2.0",
19-
"react-native": "0.74.2",
19+
"react-native": "0.74.3",
2020
"react-native-gesture-handler": "~2.16.1",
2121
"react-native-maps": "1.14.0",
2222
"react-native-reanimated": "~3.10.1"

‎example/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function App() {
4545
dismissible={false}
4646
cornerRadius={12}
4747
initialIndex={1}
48-
initialIndexAnimated={false}
48+
// initialIndexAnimated={false}
4949
onMount={() => {
5050
// sheetRef.current?.present(1)
5151
console.log('Sheet is ready!')

0 commit comments

Comments
 (0)