Skip to content

Commit bd7fdad

Browse files
janicduplessisjanicduplessis
committed
Support latest bottom-sheet dynamic sizing, rn-screens and rn-sac integration
1 parent e8a4df8 commit bd7fdad

File tree

11 files changed

+9201
-11698
lines changed

11 files changed

+9201
-11698
lines changed

‎.husky/.npmignore‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎.husky/commit-msg‎

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

‎.husky/pre-commit‎

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

‎.yarnrc‎

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

‎example/package.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,22 @@
1212
"test": "jest"
1313
},
1414
"dependencies": {
15-
"@gorhom/bottom-sheet": "^4.3.1",
16-
"@react-navigation/native": "^6.0.10",
17-
"expo": "^46.0.9",
18-
"react": "18.0.0",
19-
"react-dom": "18.0.0",
20-
"react-native": "0.69.6",
21-
"react-native-gesture-handler": "2.5.0",
22-
"react-native-reanimated": "2.9.1",
23-
"react-native-web": "0.18.7"
15+
"@gorhom/bottom-sheet": "^4.6.3",
16+
"@react-navigation/native": "^6.1.17",
17+
"expo": "^51.0.9",
18+
"react": "18.3.1",
19+
"react-dom": "18.3.1",
20+
"react-native": "0.74.1",
21+
"react-native-gesture-handler": "2.16.2",
22+
"react-native-reanimated": "3.11.0",
23+
"react-native-web": "0.19.12"
2424
},
2525
"devDependencies": {
26-
"@babel/core": "~7.18.2",
27-
"@babel/runtime": "^7.18.3",
28-
"@types/react": "~17.0.21",
29-
"babel-plugin-module-resolver": "^4.1.0",
30-
"babel-preset-expo": "9.1.0",
31-
"expo-cli": "^5.4.9"
26+
"@babel/core": "~7.24.6",
27+
"@babel/runtime": "^7.24.6",
28+
"@types/react": "~18.3.3",
29+
"babel-plugin-module-resolver": "^5.0.2",
30+
"babel-preset-expo": "11.0.6",
31+
"expo-cli": "^6.3.12"
3232
}
3333
}

‎example/yarn.lock‎

Lines changed: 4443 additions & 5998 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@
2222
"prepare": "bob build",
2323
"release": "release-it",
2424
"example": "yarn --cwd example",
25-
"pods": "cd example && pod-install --quiet",
26-
"bootstrap": "yarn example && yarn && yarn pods"
25+
"pods": "cd example && pod-install --quiet"
2726
},
2827
"keywords": [
2928
"react-native",
@@ -41,31 +40,32 @@
4140
"registry": "https://registry.npmjs.org/"
4241
},
4342
"devDependencies": {
44-
"@commitlint/config-conventional": "^17.0.2",
45-
"@gorhom/bottom-sheet": "^4.3.1",
46-
"@react-native-community/eslint-config": "^3.0.2",
47-
"@react-navigation/native": "^6.0.10",
48-
"@release-it/conventional-changelog": "^5.0.0",
49-
"@types/jest": "^28.1.1",
50-
"@types/react": "~17.0.21",
43+
"@gorhom/bottom-sheet": "^4.6.3",
44+
"@react-native-community/eslint-config": "^3.2.0",
45+
"@react-navigation/native": "^6.1.17",
46+
"@release-it/conventional-changelog": "^8.0.1",
47+
"@types/jest": "^29.5.12",
48+
"@types/react": "~18.3.3",
5149
"@types/react-native": "0.67.8",
52-
"commitlint": "^17.0.2",
53-
"eslint": "^7.2.0",
54-
"eslint-config-prettier": "^8.5.0",
55-
"eslint-plugin-prettier": "^4.0.0",
56-
"husky": "^8.0.1",
57-
"jest": "^28.1.1",
58-
"pod-install": "^0.1.36",
59-
"prettier": "^2.6.2",
60-
"react": "17.0.2",
61-
"react-native": "0.68.2",
62-
"react-native-builder-bob": "^0.18.2",
63-
"release-it": "^15.0.0",
64-
"typescript": "^4.7.3"
50+
"eslint": "^8.57.0",
51+
"eslint-config-prettier": "^9.1.0",
52+
"eslint-plugin-prettier": "^5.1.3",
53+
"jest": "^29.7.0",
54+
"pod-install": "^0.2.2",
55+
"prettier": "^3.2.5",
56+
"react": "18.3.1",
57+
"react-native": "0.74.1",
58+
"react-native-builder-bob": "^0.23.2",
59+
"react-native-safe-area-context": "^4.10.1",
60+
"react-native-screens": "^3.31.1",
61+
"release-it": "^17.3.0",
62+
"typescript": "^5.4.5"
6563
},
6664
"peerDependencies": {
6765
"react": "*",
6866
"react-native": "*",
67+
"react-native-screens": "*",
68+
"react-native-safe-area-context": "*",
6969
"@react-navigation/native": "*",
7070
"@gorhom/bottom-sheet": "*"
7171
},
@@ -76,11 +76,6 @@
7676
"<rootDir>/lib/"
7777
]
7878
},
79-
"commitlint": {
80-
"extends": [
81-
"@commitlint/config-conventional"
82-
]
83-
},
8479
"release-it": {
8580
"git": {
8681
"commitMessage": "chore: release ${version}",

‎scripts/bootstrap.js‎

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

‎src/BottomSheetView.tsx‎

Lines changed: 59 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import {
33
BottomSheetModalProps,
44
BottomSheetModalProvider,
55
BottomSheetView as RNBottomSheetView,
6-
useBottomSheetDynamicSnapPoints,
76
} from '@gorhom/bottom-sheet';
87
import { ParamListBase, useTheme } from '@react-navigation/native';
8+
import { FullWindowOverlay } from 'react-native-screens';
9+
import { SafeAreaProvider } from 'react-native-safe-area-context';
910
import * as React from 'react';
1011
import type {
1112
BottomSheetDescriptorMap,
@@ -15,40 +16,15 @@ import type {
1516
BottomSheetNavigationState,
1617
} from './types';
1718

18-
const DynamicContentHeightBottomSheet = React.forwardRef<
19-
BottomSheetModal,
20-
BottomSheetModalProps
21-
>(({ snapPoints, children, ...props }, ref) => {
22-
const {
23-
animatedHandleHeight,
24-
animatedSnapPoints,
25-
animatedContentHeight,
26-
handleContentLayout,
27-
} = useBottomSheetDynamicSnapPoints(snapPoints);
28-
29-
return (
30-
<BottomSheetModal
31-
ref={ref}
32-
contentHeight={animatedContentHeight}
33-
handleHeight={animatedHandleHeight}
34-
snapPoints={animatedSnapPoints}
35-
{...props}
36-
>
37-
<RNBottomSheetView onLayout={handleContentLayout}>
38-
{children}
39-
</RNBottomSheetView>
40-
</BottomSheetModal>
41-
);
42-
});
43-
4419
type BottomSheetModalScreenProps = BottomSheetModalProps & {
4520
navigation: BottomSheetNavigationProp<ParamListBase>;
4621
};
4722

4823
function BottomSheetModalScreen({
4924
index,
5025
navigation,
51-
snapPoints,
26+
enableDynamicSizing,
27+
children,
5228
...props
5329
}: BottomSheetModalScreenProps) {
5430
const ref = React.useRef<BottomSheetModal>(null);
@@ -90,19 +66,21 @@ function BottomSheetModalScreen({
9066
}
9167
}, [navigation]);
9268

93-
const BottomSheetComponent = snapPoints.includes('CONTENT_HEIGHT')
94-
? DynamicContentHeightBottomSheet
95-
: BottomSheetModal;
96-
9769
return (
98-
<BottomSheetComponent
70+
<BottomSheetModal
9971
ref={ref}
10072
index={index}
101-
snapPoints={snapPoints}
73+
enableDynamicSizing={enableDynamicSizing}
10274
onChange={onChange}
10375
onDismiss={onDismiss}
10476
{...props}
105-
/>
77+
>
78+
{enableDynamicSizing ? (
79+
<RNBottomSheetView>{children as React.ReactNode}</RNBottomSheetView>
80+
) : (
81+
children
82+
)}
83+
</BottomSheetModal>
10684
);
10785
}
10886

@@ -139,43 +117,53 @@ export function BottomSheetView({ state, descriptors }: Props) {
139117
return (
140118
<>
141119
{firstScreen.render()}
142-
{shouldRenderProvider.current && (
143-
<BottomSheetModalProvider>
144-
{state.routes.slice(1).map((route) => {
145-
const { options, navigation, render } = descriptors[route.key];
146-
147-
const {
148-
index,
149-
backgroundStyle,
150-
handleIndicatorStyle,
151-
snapPoints = DEFAULT_SNAP_POINTS,
152-
...sheetProps
153-
} = options;
154-
155-
return (
156-
<BottomSheetModalScreen
157-
key={route.key}
158-
// Make sure index is in range, it could be out if snapToIndex is persisted
159-
// and snapPoints is changed.
160-
index={Math.min(
161-
route.snapToIndex ?? index ?? 0,
162-
snapPoints.length - 1,
163-
)}
164-
snapPoints={snapPoints}
165-
navigation={navigation}
166-
backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
167-
handleIndicatorStyle={[
168-
themeHandleIndicatorStyle,
120+
<FullWindowOverlay>
121+
<SafeAreaProvider style={{ flex: 1, pointerEvents: 'box-none' }}>
122+
{shouldRenderProvider.current && (
123+
<BottomSheetModalProvider>
124+
{state.routes.slice(1).map((route) => {
125+
const { options, navigation, render } = descriptors[route.key];
126+
127+
const {
128+
index,
129+
backgroundStyle,
169130
handleIndicatorStyle,
170-
]}
171-
{...sheetProps}
172-
>
173-
{render()}
174-
</BottomSheetModalScreen>
175-
);
176-
})}
177-
</BottomSheetModalProvider>
178-
)}
131+
snapPoints,
132+
enableDynamicSizing,
133+
...sheetProps
134+
} = options;
135+
136+
return (
137+
<BottomSheetModalScreen
138+
key={route.key}
139+
// Make sure index is in range, it could be out if snapToIndex is persisted
140+
// and snapPoints is changed.
141+
index={Math.min(
142+
route.snapToIndex ?? index ?? 0,
143+
snapPoints != null ? snapPoints.length - 1 : 0,
144+
)}
145+
snapPoints={
146+
snapPoints == null && !enableDynamicSizing
147+
? DEFAULT_SNAP_POINTS
148+
: snapPoints
149+
}
150+
enableDynamicSizing={enableDynamicSizing}
151+
navigation={navigation}
152+
backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
153+
handleIndicatorStyle={[
154+
themeHandleIndicatorStyle,
155+
handleIndicatorStyle,
156+
]}
157+
{...sheetProps}
158+
>
159+
{render()}
160+
</BottomSheetModalScreen>
161+
);
162+
})}
163+
</BottomSheetModalProvider>
164+
)}
165+
</SafeAreaProvider>
166+
</FullWindowOverlay>
179167
</>
180168
);
181169
}

‎tsconfig.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
"allowUnreachableCode": false,
66
"allowUnusedLabels": false,
77
"esModuleInterop": true,
8-
"importsNotUsedAsValues": "error",
98
"forceConsistentCasingInFileNames": true,
109
"jsx": "react",
1110
"lib": ["esnext"],

0 commit comments

Comments
 (0)