appandflow / appandflow/react-navigation-bottom-sheet

Functionality for rendering a single modal over a stack

Aperta
#9 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
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.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.