Bottom sheet doesn't open when I re-route to back to its parent component(Homepage)
sleekLancelot opened this issue · comments
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>
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
Same for me
please ans i am facing same issue and apply all the things its not working
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
I believe that by calling the close()
method before navigating, we can resolve this issue.