Skip to content

Commit cb0a629

Browse files
gorhomgorhom
committed
docs: updated dynamic sizing page
1 parent 074dde7 commit cb0a629

File tree

7 files changed

+121
-128
lines changed

7 files changed

+121
-128
lines changed

‎website/docs/guides/dynamic-sizing.mdx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
id: dynamic-sizing
3+
title: Dynamic Sizing
4+
sidebar_label: ⭐️ Dynamic Sizing
5+
description: Bottom Sheet dynamic sizing.
6+
image: /img/bottom-sheet-preview.gif
7+
slug: /dynamic-sizing
8+
hide_table_of_contents: true
9+
---
10+
11+
Dynamic Sizing is one of the powerful feature that `v5` introduces, where the library internally managed to calculate static views and list content size height and set it as the bottom sheet content height.
12+
13+
:::info
14+
15+
The mechanism was introduce previously with [useBottomSheetDynamicSnapPoints](https://gorhom.dev/react-native-bottom-sheet/v4/hooks#usebottomsheetdynamicsnappoints) hook which been deprecated with the new release.
16+
17+
:::
18+
19+
import useBaseUrl from "@docusaurus/useBaseUrl";
20+
import Video from "@theme/Video";
21+
22+
<Video
23+
title="React Native Bottom Sheet Dynamic Sizing"
24+
url={useBaseUrl("video/bottom-sheet-dynamic-sizing-preview.mp4")}
25+
/>
26+
27+
### Usage
28+
29+
In order to enable the dynamic sizing to work properly, you would need to follow these rules:
30+
31+
1. Use the pre-configured [Scrollables](./scrollables) views, including the static view [BottomSheetView](./components/bottomsheetview).
32+
2. In order to prevent the bottom sheet a exceeding certain height, you will need to set [`maxDynamicContentSize`](./props#maxdynamiccontentsize) prop.
33+
34+
And remember, you can always disable the feature if its not needed by overriding the prop [`enableDynamicSizing`](./props#enabledynamicsizing) with `false`.
35+

‎website/docs/hooks.md‎

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -32,51 +32,6 @@ const SheetContent = () => {
3232
}
3333
```
3434

35-
## useBottomSheetDynamicSnapPoints
36-
37-
A hook to simplify handling dynamic snap points, it will take an initial snap points with a placeholder for content height `CONTENT_HEIGHT` that will be replaced once the content is measured and will return:
38-
39-
- `animatedSnapPoints`: to provided to BottomSheet or BottomSheetModal.
40-
- `animatedHandleHeight`: an animated handle height callback node.
41-
- `animatedContentHeight`: an animated content height.
42-
- `handleContentLayout`: onLayout callback to be set on BottomSheetView component.
43-
44-
```tsx
45-
import React from 'react';
46-
import BottomSheet, {
47-
useBottomSheetDynamicSnapPoints,
48-
} from '@gorhom/bottom-sheet';
49-
50-
const App = () => {
51-
const initialSnapPoints = useMemo(() => ['25%', 'CONTENT_HEIGHT'], []);
52-
53-
const {
54-
animatedHandleHeight,
55-
animatedSnapPoints,
56-
animatedContentHeight,
57-
handleContentLayout,
58-
} = useBottomSheetDynamicSnapPoints(initialSnapPoints);
59-
60-
return (
61-
//... other views
62-
<BottomSheet
63-
ref={bottomSheetRef}
64-
snapPoints={animatedSnapPoints}
65-
handleHeight={animatedHandleHeight}
66-
contentHeight={animatedContentHeight}
67-
>
68-
<BottomSheetView
69-
style={contentContainerStyle}
70-
onLayout={handleContentLayout}
71-
>
72-
//... views to be measured
73-
</BottomSheetView>
74-
</BottomSheet>
75-
//... other views
76-
);
77-
};
78-
```
79-
8035
## useBottomSheetSpringConfigs
8136

8237
Generate animation spring configs.

‎website/docs/index.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,11 @@ import Video from "@theme/Video";
3030

3131
## Features
3232

33+
- Support React Native Web 🔥.
3334
- Modal presentation view, [Bottom Sheet Modal](./modal).
35+
- Dynamic Sizing 📏, [read more](./dynamic-sizing).
3436
- Smooth gesture interactions & snapping animations.
3537
- Seamless [keyboard handling](./keyboard-handling) for iOS & Android.
36-
- Support React Native Web 🔥
3738
- Support [pull to refresh](./pull-to-refresh) for scrollables.
3839
- Support `FlatList`, `SectionList`, `ScrollView` & `View` scrolling interactions. [read more](./scrollables).
3940
- Support `React Navigation` Integration, [read more](./react-navigation-integration).

‎website/docs/props.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ Enable dynamic sizing for content view and scrollable content size.
9393

9494
| type | default | required |
9595
| ------- | ------- | -------- |
96-
| boolean | false | NO |
96+
| boolean | true | NO |
9797

9898
:::caution
9999

‎website/docs/sidebars.ts‎

Lines changed: 82 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
1+
import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
22

33
/**
44
* Creating a sidebar enables you to:
@@ -11,87 +11,88 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
1111
Create as many sidebars as you want.
1212
*/
1313
const sidebars: SidebarsConfig = {
14-
// By default, Docusaurus generates a sidebar from the docs folder structure
15-
// "bottom-sheet": [{ type: "autogenerated", dirName: "." }],
14+
// By default, Docusaurus generates a sidebar from the docs folder structure
15+
// "bottom-sheet": [{ type: "autogenerated", dirName: "." }],
1616

17-
// But you can create a sidebar manually
18-
"bottom-sheet": [
19-
{
20-
type: "category",
21-
label: "Bottom Sheet",
22-
link: {
23-
type: "doc",
24-
id: "index",
25-
},
26-
items: [
27-
"usage",
28-
"props",
29-
"methods",
30-
"hooks",
31-
"scrollables",
32-
{
33-
type: "category",
34-
label: "Components",
35-
items: [
36-
"components/bottomsheetview",
37-
"components/bottomsheetscrollview",
38-
"components/bottomsheetflatlist",
39-
"components/bottomsheetsectionlist",
40-
"components/bottomsheetvirtualizedlist",
41-
"components/bottomsheetbackdrop",
42-
"components/bottomsheetfooter",
43-
"components/bottomsheettextinput",
44-
],
45-
},
46-
],
47-
},
48-
{
49-
type: "html",
50-
value: "<hr class='margin-vert--md margin-horiz--md' />",
51-
defaultStyle: false
52-
},
53-
{
54-
type: "category",
55-
label: "Bottom Sheet Modal",
56-
link: {
57-
type: "doc",
58-
id: "modal/index",
59-
},
60-
items: ["modal/usage", "modal/props", "modal/methods", "modal/hooks"],
61-
},
62-
{
63-
type: "html",
64-
value: "<hr class='margin-vert--md margin-horiz--md' />",
65-
defaultStyle: false
66-
},
67-
{
68-
type: "category",
69-
label: "Guides",
70-
items: [
71-
"guides/custom-handle",
72-
"guides/custom-backdrop",
73-
"guides/custom-background",
74-
"guides/custom-footer",
75-
"guides/detach-modal",
76-
"guides/keyboard-handling",
77-
"guides/pull-to-refresh",
78-
"guides/adding-shadow",
79-
"guides/react-navigation-integration",
80-
],
81-
},
82-
"troubleshooting",
83-
"faq",
84-
{
85-
type: "html",
86-
value: "<hr class='margin-vert--md margin-horiz--md' />",
87-
defaultStyle: false
88-
},
89-
{
90-
type: "link",
91-
label: "Github",
92-
href: "https://github.com/gorhom/react-native-bottom-sheet"
93-
}
94-
],
17+
// But you can create a sidebar manually
18+
'bottom-sheet': [
19+
{
20+
type: 'category',
21+
label: 'Bottom Sheet',
22+
link: {
23+
type: 'doc',
24+
id: 'index',
25+
},
26+
items: [
27+
'usage',
28+
'props',
29+
'methods',
30+
'hooks',
31+
'scrollables',
32+
{
33+
type: 'category',
34+
label: 'Components',
35+
items: [
36+
'components/bottomsheetview',
37+
'components/bottomsheetscrollview',
38+
'components/bottomsheetflatlist',
39+
'components/bottomsheetsectionlist',
40+
'components/bottomsheetvirtualizedlist',
41+
'components/bottomsheetbackdrop',
42+
'components/bottomsheetfooter',
43+
'components/bottomsheettextinput',
44+
],
45+
},
46+
],
47+
},
48+
{
49+
type: 'html',
50+
value: "<hr class='margin-vert--md margin-horiz--md' />",
51+
defaultStyle: false,
52+
},
53+
{
54+
type: 'category',
55+
label: 'Bottom Sheet Modal',
56+
link: {
57+
type: 'doc',
58+
id: 'modal/index',
59+
},
60+
items: ['modal/usage', 'modal/props', 'modal/methods', 'modal/hooks'],
61+
},
62+
{
63+
type: 'html',
64+
value: "<hr class='margin-vert--md margin-horiz--md' />",
65+
defaultStyle: false,
66+
},
67+
{
68+
type: 'category',
69+
label: 'Guides',
70+
items: [
71+
'guides/dynamic-sizing',
72+
'guides/custom-handle',
73+
'guides/custom-backdrop',
74+
'guides/custom-background',
75+
'guides/custom-footer',
76+
'guides/detach-modal',
77+
'guides/keyboard-handling',
78+
'guides/pull-to-refresh',
79+
'guides/adding-shadow',
80+
'guides/react-navigation-integration',
81+
],
82+
},
83+
'troubleshooting',
84+
'faq',
85+
{
86+
type: 'html',
87+
value: "<hr class='margin-vert--md margin-horiz--md' />",
88+
defaultStyle: false,
89+
},
90+
{
91+
type: 'link',
92+
label: 'Github',
93+
href: 'https://github.com/gorhom/react-native-bottom-sheet',
94+
},
95+
],
9596
};
9697

9798
export default sidebars;

‎website/sidebars.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const sidebars: SidebarsConfig = {
6868
type: 'category',
6969
label: 'Guides',
7070
items: [
71+
'guides/dynamic-sizing',
7172
'guides/custom-handle',
7273
'guides/custom-backdrop',
7374
'guides/custom-background',

‎website/static/video/bottom-sheet-dynamic-sizing-preview.mp4‎

722 KB
Binary file not shown.

0 commit comments

Comments
 (0)