appandflow / appandflow/react-navigation-bottom-sheet

Functionality for rendering a single modal over a stack

Open
#9 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
496
Forks
24
PR merge metrics
No merged PRs in 30d

Description

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];
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.