Bottom sheet doesn't open when I re-route to back to its parent component(Homepage)

[sleekLancelot]

Hi, need help here, been battling this for weeks now. My bottemsheet is placed in the homepage, so it contains links to some other pages on the app, when I open the bottomsheet and click on a link, it routes to that page. But when I go back to my homepage, and try to open the bottomsheet again. it doesn't respond. The bottomsheet doesn't come up. Until I refresh the app and start over, so the bottomsheet only comes up once. After usage, it doesn't again.

Packages:

 "react-native-raw-bottom-sheet": "^2.2.0"
    "expo": "^45.0.0"
    "react-native": "0.68.2"

And here is the core of my BottomSheet component:

<View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#000",
      }}
    >

      <RBSheet
        ref={ref}
        closeOnDragDown={false}
        dragFromTopOnly={true}
        closeOnPressMask={true}
        height={300}
        customStyles={{
          wrapper: {
            backgroundColor: 'rgba(0, 0, 0, 0.6)',
          },
          container: {
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20,
          },
          draggableIcon: {
            backgroundColor: "#000"
          }
        }}
      >
        <FlatList
          data={nav}
          horizontal={false}
          numColumns={numOfColumns}
          sx={{
            maxWidth: '100%',
            marginLeft: 'auto',
            marginRight: 'auto',
            paddingLeft: 10,
            paddingRight: 10,
          }}
          columnWrapperStyle={{ 
            flex: 1, 
            justifyContent: 'flex-start',
          }}
          renderItem={
            ( {item} ) => (
              !remove?.includes( item?.name ) ?
              (
                <NavItem
                  n={ 
                    !remove?.includes( item?.name ) ? 
                    item : undefined
                  }
                  closeBottomSheet={() => {
                    return ref?.current?.close()
                  }}
                  as={ Platform.OS !== 'web' ? View : null}
                  tabStyle={{
                    // ...item?.style,
                    width: 100,
                    height: 100,
                    padding: 15,
                    color: '#000',
                    marginTop: 10,
                    fontFamily: theme.customFonts.Lato[ "normal" ],
                    textTransform: 'capitalize',
                    textAlign: 'center',
                    alignSelf: 'baseline',
                  }}
                />

              ) : null
            )     
          }
          keyExtractor={ item => item?.name}
        />

      </RBSheet>
    </View>

[vikassingh7]

I also got the same issue on other screen but on Home Screen its working fine while re route from any component to Home screen

[nawalpro]

Same for me

[faizanmansuri360]

please ans i am facing same issue and apply all the things its not working

[sleekLancelot]

please ans i am facing same issue and apply all the things its not working

This package is stale, hasn't been updated in 4years. I suggest you use gorhom bottom-sheet

[nysamnang]

I believe that by calling the close() method before navigating, we can resolve this issue.