|
7 | 7 | } from '@gorhom/bottom-sheet'; |
8 | 8 | import { ParamListBase, useTheme } from '@react-navigation/native'; |
9 | 9 | import * as React from 'react'; |
| 10 | +import { FullWindowOverlay } from 'react-native-screens'; |
10 | 11 | import type { |
11 | 12 | BottomSheetDescriptorMap, |
12 | 13 | BottomSheetNavigationConfig, |
@@ -121,45 +122,47 @@ export function BottomSheetView({ state, descriptors }: Props) { |
121 | 122 | <> |
122 | 123 | {firstScreen.render()} |
123 | 124 | {shouldRenderProvider.current && ( |
124 | | - <BottomSheetModalProvider> |
125 | | - {state.routes.slice(1).map((route) => { |
126 | | - const { options, navigation, render } = descriptors[route.key]; |
127 | | - |
128 | | - const { |
129 | | - index, |
130 | | - backgroundStyle, |
131 | | - handleIndicatorStyle, |
132 | | - snapPoints = animatedSnapPoints.value, |
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.length - 1, |
144 | | - )} |
145 | | - contentHeight={animatedContentHeight} |
146 | | - handleHeight={animatedHandleHeight} |
147 | | - snapPoints={snapPoints} |
148 | | - navigation={navigation} |
149 | | - backgroundStyle={[themeBackgroundStyle, backgroundStyle]} |
150 | | - handleIndicatorStyle={[ |
151 | | - themeHandleIndicatorStyle, |
152 | | - handleIndicatorStyle, |
153 | | - ]} |
154 | | - {...sheetProps} |
155 | | - > |
156 | | - <RNBottomSheetView onLayout={handleContentLayout}> |
157 | | - {render()} |
158 | | - </RNBottomSheetView> |
159 | | - </BottomSheetModalScreen> |
160 | | - ); |
161 | | - })} |
162 | | - </BottomSheetModalProvider> |
| 125 | + <FullWindowOverlay> |
| 126 | + <BottomSheetModalProvider> |
| 127 | + {state.routes.slice(1).map((route) => { |
| 128 | + const { options, navigation, render } = descriptors[route.key]; |
| 129 | + |
| 130 | + const { |
| 131 | + index, |
| 132 | + backgroundStyle, |
| 133 | + handleIndicatorStyle, |
| 134 | + snapPoints = animatedSnapPoints.value, |
| 135 | + ...sheetProps |
| 136 | + } = options; |
| 137 | + |
| 138 | + return ( |
| 139 | + <BottomSheetModalScreen |
| 140 | + key={route.key} |
| 141 | + // Make sure index is in range, it could be out if snapToIndex is persisted |
| 142 | + // and snapPoints is changed. |
| 143 | + index={Math.min( |
| 144 | + route.snapToIndex ?? index ?? 0, |
| 145 | + snapPoints.length - 1, |
| 146 | + )} |
| 147 | + contentHeight={animatedContentHeight} |
| 148 | + handleHeight={animatedHandleHeight} |
| 149 | + snapPoints={snapPoints} |
| 150 | + navigation={navigation} |
| 151 | + backgroundStyle={[themeBackgroundStyle, backgroundStyle]} |
| 152 | + handleIndicatorStyle={[ |
| 153 | + themeHandleIndicatorStyle, |
| 154 | + handleIndicatorStyle, |
| 155 | + ]} |
| 156 | + {...sheetProps} |
| 157 | + > |
| 158 | + <RNBottomSheetView onLayout={handleContentLayout}> |
| 159 | + {render()} |
| 160 | + </RNBottomSheetView> |
| 161 | + </BottomSheetModalScreen> |
| 162 | + ); |
| 163 | + })} |
| 164 | + </BottomSheetModalProvider> |
| 165 | + </FullWindowOverlay> |
163 | 166 | )} |
164 | 167 | </> |
165 | 168 | ); |
|
0 commit comments