appandflow / appandflow/react-navigation-bottom-sheet

Functionality for rendering a single modal over a stack

未关闭
#9 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
496
派生
24
PR 合并指标
30 天内没有已合并 PR

描述

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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。