[v4] | [v2] Couldn't find navigation object with BottomSheetModal

[sumi-svmx]

Bug

On wrapping a component that internally uses react-navigation hooks (eg, useFocusEffect, useNavigation) with BottomSheetModal, throws error "Couldn't find navigation object. Is your component in a screen inside navigator?". However, works on using with BottomSheet component.

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.3
react-native	0.66.3
react-native-reanimated	2.6.0
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. Open bottom sheet modal that uses and component containing react navigation hooks

Describe what you expected to happen:

1. Work without crash

Reproducible sample code

import {useFocusEffect, useNavigation} from '@react-navigation/native';
import React from 'react';
import {View} from 'react-native';

const DummyComponent = () => {
  const nav = useNavigation();
  useFocusEffect(() => {
    console.log('test');
  });

  return <View style={{backgroundColor: 'yellow', height: 20}} />;
};

export default DummyComponent;

---

import React from 'react';
import {BottomSheetModal, BottomSheetBackdrop} from '@gorhom/bottom-sheet';

export function Component(props: Props) {
    <BottomSheetModal
      ref={bottomSheetModalRef}
      index={0}
      backdropComponent={prop => <BottomSheetBackdrop {...prop} />}
      snapPoints={snapPoints}>
      <DummyComponent />
    </BottomSheetModal>
}

[jhhayashi]

Is your <NavigationContainer /> a parent of your <BottomSheetModalProvider />?

[sumi-svmx]

@jhhayashi

Is your <NavigationContainer /> a parent of your <BottomSheetModalProvider />?

Yes, BottomSheetModalProvider is wrapped inside NavigationContainer

App.tsx render

  return (
    <NavigationContainer ref={navRef}>
      <BottomSheetModalProvider>
        <Root />
      </BottomSheetModalProvider>
    </NavigationContainer>
  );

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[hridoy43]

@sumi-svmx

Have you solved the issue? I'm getting the same error also.

[moxorama]

I'm using workaround with NavigationService https://reactnavigation.org/docs/navigating-without-navigation-prop

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[carlosriveroib]

I'm using workaround with NavigationService https://reactnavigation.org/docs/navigating-without-navigation-prop

Can you share your workaround?

[AronBe]

If you is outside of NavigationContainer you might get this error, but you can always use to wrap your component/screen again to be inside of the NavigationContainer

[Hopefulee]

@jhhayashi

Is your <NavigationContainer /> a parent of your <BottomSheetModalProvider />?

Yes, BottomSheetModalProvider is wrapped inside NavigationContainer

App.tsx render

  return (
    <NavigationContainer ref={navRef}>
      <BottomSheetModalProvider>
        <Root />
      </BottomSheetModalProvider>
    </NavigationContainer>
  );

Thanks