appandflow / appandflow/react-navigation-bottom-sheet
Functionality for rendering a single modal over a stack
- Lingua principale
- TypeScript
- Stelle
- 496
- Fork
- 24
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
Hi there, thank you for the great library, it is a great abstraction over the bottom sheet library for routing!
An issue I came across was needing to show a single bottom sheet in a transparent modal over a screen like this:
```tsx
const Stack = createNativeStackNavigator();
const BottomSheet = createBottomSheetNavigator();
function MyModal() {
return (
);
}
export function HomeStack() {
return (
);
}
```
If my `HomeStack` has lots of other screens that I don't want to be shown as bottom sheets then the above I think is the only option. But this library seems to require that the first screen in the bottom sheet navigator be your app content, not a modal. I'm not sure the best solution but I've added the below patch with a `firstScreenIsModal` option to always show the bottom sheet provider if true.
I'm happy to submit a PR with the below patch if you think it is a good approach but wanted to get your thoughts on it first!
Patch
```diff
// in BottomSheetView.tsx
+ const firstScreen = descriptors[state.routes[0].key];
+ const { firstScreenIsModal = false } = firstScreen.options
+
// Avoid rendering provider if we only have one screen.
- const shouldRenderProvider = React.useRef(false);
+ const shouldRenderProvider = React.useRef(firstScreenIsModal);
shouldRenderProvider.current =
shouldRenderProvider.current || state.routes.length > 1;
- const firstScreen = descriptors[state.routes[0].key];
return (
<>
- {firstScreen.render()}
+ {firstScreenIsModal ? null : firstScreen.render()}
{shouldRenderProvider.current && (
- {state.routes.slice(1).map((route) => {
+ {state.routes.slice(firstScreenIsModal ? 0 : 1).map((route) => {
const { options, navigation, render } = descriptors[route.key];
```
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.