th3rdwave / react-navigation-bottom-sheet Goto Github PK

Swipe-to-close the BottomSheetModal doesn't work neither on Emulators nor on physical devices. Handle just doesn't respond.

Could there be a common gotcha going on here? My navigator is as vanilla as it gets, except for a backdrop

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        appearsOnIndex={0}
        disappearsOnIndex={-1}
        opacity={0.8}
        pressBehavior="close"
      />
    ),
    [],
  );

Lack of stackBehavior property

Here is the diff that solved my problem:

diff --git a/node_modules/@th3rdwave/react-navigation-bottom-sheet/lib/typescript/types.d.ts b/node_modules/@th3rdwave/react-navigation-bottom-sheet/lib/typescript/types.d.ts
index e03cf4e..d807543 100644
--- a/node_modules/@th3rdwave/react-navigation-bottom-sheet/lib/typescript/types.d.ts
+++ b/node_modules/@th3rdwave/react-navigation-bottom-sheet/lib/typescript/types.d.ts
@@ -31,6 +31,8 @@ export declare type BottomSheetNavigationOptions = Omit<BottomSheetProps, 'conta
      * @type Array<string | number>
      */
     snapPoints?: Array<string | number>;
+    
+    stackBehavior?: 'push' | 'replace'
 };
 export declare type BottomSheetNavigatorProps = DefaultNavigatorOptions<ParamListBase, BottomSheetNavigationState<ParamListBase>, BottomSheetNavigationOptions, BottomSheetNavigationEventMap> & BottomSheetNavigationConfig;
 export declare type BottomSheetDescriptor = Descriptor<BottomSheetNavigationOptions, BottomSheetNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
diff --git a/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/types.tsx b/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/types.tsx
index eb22fea..78af81b 100644
--- a/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/types.tsx
+++ b/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/types.tsx
@@ -89,6 +89,8 @@ export type BottomSheetNavigationOptions = Omit<
    * @type Array<string | number>
    */
   snapPoints?: Array<string | number>;
+  
+  stackBehavior?: 'push' | 'replace'
 };
 
 export type BottomSheetNavigatorProps = DefaultNavigatorOptions<

When you trying to pan down the screen with opened keyboard the bottom sheet throws an error that it tried to synchronously call function dismiss from a different thread.

It seems to be happening somewhere around here https://github.com/gorhom/react-native-bottom-sheet/blob/2e558d13fdb52a83d5b465779ec3517fcfb131c2/src/hooks/useGestureEventsHandlersDefault.tsx#L301, but I can see that keyboard dismissing here is wrapped in runOnJS, so not sure why the error appears. Maybe you guys met with such issue before?

Thanks a lot for this library, I was planning to create one and during my search found this brand new one !

During the implementation everything seems to work fine except one thing, when using BottomSheetFlatList in the screen with at least 2 snapPoint it's not working.

Correct behaviour:
You should be able to scroll to the last snapPoint form the BottomSheetFlatList.

Actual behaviour:
Scroll event on BottomSheetFlatList aren't handle at all.

I've take a look on the view three, and I think it may be related to the fact that each screen is inside a react-navigation SceneView.
Not sure at 100%, but I've seen some issue using BottomSheetFlatList in nested view on @gorhom/bottom-sheet library.
Do you think we have an option to fix this problem ?

Hello!

In my React Native app, I use some complex navigation logic, as follows:

Navigation container
└── Root navigator
        │
        │── Bottom-sheet navigator
                    │
                    ├── Bottom-Tab navigator

As you see, the bottom-sheet navigator is wraped inside Root navigator which is of type native-stack.

Now the issue in code is : When I use Bottom-sheet navigator a screen inside Root navigator, and set headerShow as follows:

<Stack.Screen
  name={"GlobalBottomSheet}
  component={NotificationBottomSheetNav}
  options={{
    headerShown: false
  }}
/>

When I run the app, I notice the existence of a default text "GlobalBottomSheet" as header on top of some screens (screens wrapped inside the bottom-sheet navigator.

Note: When I set the headerTitle=" " , it disappears, but I see that it becomes a space.

What I need is: Please verify the property headerShown and how it works.

See usage:

  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
    console.log('render')

    return (
      <BottomSheetFooter {...props} bottomInset={Metrics.baseMargin}>
        <Text
          style={{
            color: 'white',
          }}
        >
          consentScreenDisclaimerText
        </Text>
      </BottomSheetFooter>
    )
  }, [])
  
 <MyStack.Screen
          name="MyScreen"
          component={MyScreen}
          options={{
            footerComponent: renderFooter,
            snapPoints: ['20%'],
          }}
/>

Are we allowed to use native modal inside this navigator ?

My screen as modal opens a bottomsheet, weird behaviour

I use Tabs inside my navigator, maybe it isn't handled for now ?

<Stack.Group
    screenOptions={{
	presentation: 'fullScreenModal',
	gestureEnabled: false,
    }}
>
    <Stack.Screen
	 name={CONSTANTS.navigation.Screens.ImageDetails}
	 component={ImageDetails}
	 options={{ animation: 'fade' }}
    />
    <Stack.Screen name={CONSTANTS.navigation.Screens.GroupCU} component={GroupCU} />
    <Stack.Screen
	 name={CONSTANTS.navigation.Screens.PostCU}
	 component={PostCU}
	 options={{}}
    />
    <Stack.Screen name={CONSTANTS.navigation.Screens.PostIn} component={PostIn} />
</Stack.Group>

Hello!

I have a sheet view with a scrollable list. The scroll doesn't work! We've tried many ways to solve it but nothing works!
I've reproduced the issue within a snack

Please Help !

Hi,

I am using this library for two types of navigation views. One is a bottom sheet and another is what I call a "floating window", which are these views that pop up from the bottom:

My implementation is that I just have a snapPoint that is 100% and then I centralize a small view in the middle of the transparent modal.

With the new 0.2.4 update, I am suddenly unable to centralize these windows in the middle of the screen. All of my views are sticky to the top, regardless of what styles I try to change. I can of course reduce the snap point, but that doesn't work dynamically.

I can see that the update includes the dynamic snap points (content), but I guess that's assuming the content run to the bottom of the screen, hence why its know working for me.

I can see a fix for me is to set contentHeight on the component to undefined in BottomSheetView.tsx.

I understand that my implementation is not really using your library as a "bottom sheet", so I understand if its not something you feel like taking into consideration. But it would be nice to be able to enable/disable it, since this minor update have had a major impact on my app 😄

When i use chrome debugger to debug my app, i have to double press or press anywhere in the screen to open the sheet.

Is there a way to make the react navigation header bar doesn't cover the bottom sheet backdrop?

iOS uses FullWindowOverlay to achieve a fullscreen modal.
Is something like this also possible on Android?

<BottomSheet.Navigator
  screenOptions={{
    backdropComponent: _renderBackdrop,
    snapPoints,
  }}>
  <BottomSheet.Screen name={'RootStack'} component={RootStack} />
  <BottomSheet.Screen name={'SignUpSheet'} component={SignUpSheet} />
  <BottomSheet.Screen
    name={'SignInSheet'}
    component={signInSheet}
    options={{
      keyboardBehavior: 'interactive',
    }}
  />
</BottomSheet.Navigator>

// SignInSheet.tsx
<BottomSheetView style={{ ...styles.container }}>
  <Inner style={{ ...styles.innerContainer }}>
    <Input placeholder={'EMAIL'} />
    <Input placeholder={'PASSWORD'} />
  </Inner>
</BottomSheetView>

I configured it like this, but when the keyboard comes up, the related options don't apply

It's the same if you put it in Navigator.screenOptions

Can you take a look at this problem?

I discovered this while I was considering the fusion of @gorhom/bottom-sheet and @react-navigation.

Thank you for keeping my time

Hello ! I'm upgrading one of my large private Expo projects and i thought about updating this library. it seems ^0.3.2 is not suitble for iOS(however the working version is: ^0.2.4);

Please check the following expo snack: https://snack.expo.dev/@iga-frg/react-native-bottomsheet-navigator-demo

Screenshot :

I'm having trouble locating the option to define the background color for the sheet.

It seems really hard to close all open modals. I have two modals that are open using stackBehavior: 'replace'.
The second modal contains a form that navigates to a different screen on submit. When I submit, it navigates to the new screen, and then opens the old modal again.

I have tried calling dismissAll from useBottomSheetModal. I have tried doing calling Navigation.goBack() and then Navigation.navigate.

The properties PlatformkeyboardBehavior and keyboardBlurBehavior are not effective

I am testing the SimpleExample..., https://github.com/th3rdwave/react-navigation-bottom-sheet/blob/main/example/src/SimpleExample.tsx

When I open let's say 6 BottomSheets and then press the back button "<" QUICKLY, all the BottomSheets do not close, but if the app is exited, when I reopen the app the screen shows me which is in Sheet Screen 5, I press the CLOSE THIS SHEET button and it says "Console Error The action 'GO_BACK' was not handled by any navigator.". What am I doing wrong?

Hello, I'm writing to you this as an urgent issue. After passing few hours to configure the bottom-sheet navigator in my BIG app. Now, I come to show the content of it, which is a list. Even with BottomSheetScrollView I can't scroll down or top. Please help.

Is not an issue, but it would be amazing to implement this hook useBottomSheetDynamicSnapPoints out of the box, like a screenOptions property. I can contribute if is necessary. Or in case it would be hard we can make a little section in the README how to implemented with the current status of the package.

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:

const Stack = createNativeStackNavigator();
const BottomSheet = createBottomSheetNavigator();

function MyModal() {
  return (
    <BottomSheet.Navigator>
      <BottomSheet.Screen
        component={MyModalComponent}
        name="MyModal"
        options={MyModalComponent.options}
      />
    </BottomSheet.Navigator>
  );
}

export function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        component={HomeScreen}
        name="Home"
      />
      <Stack.Group screenOptions={{ presentation: "transparentModal" }}>
        <Stack.Screen
          component={MyModal}
          name="MyModalBottomSheet"
        />
      </Stack.Group>
    </Stack.Navigator>
  );
}

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!

// 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 && (
         <BottomSheetModalProvider>
-          {state.routes.slice(1).map((route) => {
+          {state.routes.slice(firstScreenIsModal ? 0 : 1).map((route) => {
             const { options, navigation, render } = descriptors[route.key];