Closed paranoia5 closed 2 years ago
I was also having this exact problem, my BottomSheetModal
s and BottomSheetScrollView
s were not responding to touch events on Android.
react-native-gesture-handler
requires a wrapper around the root view to function. In v1 of the library, this was done on the native side, and expo did this for you. In v2 of the library, you must use the GestureHandlerRootView
in your app manually. Upgrading to SDK 44 of expo removes the native RNGH setup.
The GestureHandlerRootView
must be applied as high as possible in your app's component tree.
In my case, I had my BottomSheetModalProvider
outside the GestureHandlerRootView
, and swapping these two components fixed the issue for me!
Before:
<BottomSheetModalProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<MainNavigation />
</GestureHandlerRootView>
</BottomSheetModalProvider>
After:
<GestureHandlerRootView style={{ flex: 1 }}>
<BottomSheetModalProvider>
<MainNavigation />
</BottomSheetModalProvider>
</GestureHandlerRootView>
@gorhom does it make sense to update the docs to say that BottomSheetModalProvider must be inside GestureHandlerRootView?
@Yonom yes, it worked for me β
Does not work for me (BottomSheet). @aozfen How do you do it?
it was enough for me to add "GestureHandlerRootView" in app js Before: App.js
const App: () => React$Node = () => {
return (
<BottomSheetModalProvider>
<StatusBar barStyle="dark-content" backgroundColor={colors.light.initStatusBarBgColor} />
<Start />
</BottomSheetModalProvider>
);
};
After: App.js
import { GestureHandlerRootView } from 'react-native-gesture-handler'; //-->add
const App: () => React$Node = () => {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<BottomSheetModalProvider>
<StatusBar barStyle="dark-content" backgroundColor={colors.light.initStatusBarBgColor} />
<Start />
</BottomSheetModalProvider>
</GestureHandlerRootView>
);
};
and my bottom sheet component
import React, { useCallback, useMemo, useRef } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import {
BottomSheetModal,
} from '@gorhom/bottom-sheet';
const BottomSheets = () => {
// ref
const bottomSheetModalRef = useRef(null);
// variables
const snapPoints = useMemo(() => ['25%', '50%'], []);
// callbacks
const handlePresentModalPress = useCallback(() => {
bottomSheetModalRef.current?.present();
}, []);
const handleSheetChanges = useCallback((index) => {
console.log('handleSheetChanges', index);
}, []);
return <>
<Button
onPress={handlePresentModalPress}
title="Present Modal"
color="black"
/>
<BottomSheetModal
enableOverDrag={true}
ref={bottomSheetModalRef}
snapPoints={snapPoints}
onChange={handleSheetChanges}
>
<View style={styles.contentContainer}>
<Text>Awesome π</Text>
</View>
</BottomSheetModal>
</>
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
justifyContent: 'center',
backgroundColor: 'grey',
},
contentContainer: {
flex: 1,
alignItems: 'center',
},
});
export default BottomSheets;
@Yonom @aozfen have you tried to put the contents inside of <BottomSheetScrollView>
component?
BottomSheetModalProvider
didn't solve the problem.
@Yonom @aozfen @paranoia5
Still have the same issue with <BottomSheetScrollView>
as @paranoia5 has :/
@Lurtt do you have a GestureHandlerRootView
around your app's entry point?
If no:
Follow these instructions to add a GestureHandlerRootView
: https://docs.swmansion.com/react-native-gesture-handler/docs/#js
If yes: I cannot reproduce the issue you're having, so I'm gonna ask you to create a minimal reproducible repo so we can look into it
@Yonom make sure you upgrade Expo Go to the latest version 2.23.2 and you will be able to reproduce the issue.
@Yonom Exactly as @paranoia5 wrote...it happens when you upgrade expo go to the latest and use BottomSheet
with BottomSheetScrollView
I've tried the BottomSheetScrollView
example in doc with latest expo go
and it doesn't work at all :/
The example in the docs does not use a GestureHandlerRootView
. You need a GestureHandlerRootView
to make scrolling work.
@Yonom I used the < GestureHandlerRootView />
and it doesn't help the problem is still present
It works for me. I copied the example in the docs, had to fix a react issue, added GestureHandlerRootView, and ran it on my phone running Android 11 on Expo Go 2.23.2.
Look, we can go back and forth on how it works for me and it doesn't work for you, but we won't get anywhere. Can you make a small repository with the example in the docs and GestureHandlerRootView
set up? Then I can look at it, reproduce the issue, and figure out why it doesn't work.
I've tested android and yeah you are right there is no issue but on iOS it doesn't work :( also same problem on simulator with latest expo go
Ah, iOS. I can reproduce the issue now! Interestingly enough, it doesn't happen on my ejected expo 44 project... I'll take a closer look at it later today π
In them meantime, @paranoia5 can you update the issue to say that the error happens on iOS (only)?
sure @Yonom the issue has been updated. I personally haven't tested on android. I've tested only on iOS.
@Yonom any progress so far? :) Seem it is hard to fix right :(
I can confirm that the issue is fixed with SDK 44 built with EAS, I have not tried with the managed expo build.
Still an issue for me on SDK 44 in managed workflow (iOS). Works fine on Android though.
+1, am experiencing some very strange behavior (iOS only). Bottom sheet does is not swipable on first render, after refresh works on sim, physical device it does not work... Have a feeling this has more to do with gesture handler. am on v1.10.2. anyone have any suggestions?
Confirmed that this is an actual issue on iOS running with Expo Go 2.23.2 , on Android is not happening.
Probably the issue is inside Expo go and not in this library itself.
Found a related issue: https://github.com/expo/expo/issues/15681
This issue seems to only be when using the Expo Go client. Once a built a production version of the app (using Expo managed workflow), it works correctly.
This issue seems to only be when using the Expo Go client. Once a built a production version of the app (using Expo managed workflow), it works correctly.
This problem was actually occurring on a production build of the app. We were able to fix the problem by upgrading to Expo 44 and wrapping the app in GestureHandlerAtRoot
imported from react-native-gesture-handler
This issue seems to only be when using the Expo Go client. Once a built a production version of the app (using Expo managed workflow), it works correctly.
We are still using Expo 42.
same here +1
+1
+1
Also have this problem on EXPO 43
+1
Thank you, I had success by wrapping my entire application in a
Thank you, I had success by wrapping my entire application in a component. My modal is now scrollable and collapsible.
Could you please share with us more details through snacks or sample code so we can test out?
After a while of struggling I implemented some of the solutions that were mentioned here including making sure if I had the correct dependencies installed. What seems to have given me the desired results in the following code returned in my App. Note that the
App.js
return (
<SafeAreaView style={styles.container}>
<GestureHandlerRootView style={{flex: 1}}>
<BottomSheetModalProvider>
<FlatList
keyExtractor={(item) => item.id}
data={SAMPLE_DATA}
renderItem={({ item }) => (
<ListItem
name={item.name}
symbol={item.symbol}
currentPrice={item.current_price}
priceChange={item.price_change_percentage_7d_in_currency}
logoUrl={item.image}
onPress={() => openModal(item)}
/>
)}
ListHeaderComponent={<ListHeader />}
/>
<View style={styles.bottomSheet}>
<BottomSheetModal ref={bottomSheetModalRef} index={0} snapPoints={snapPoints} handleComponent={SheetHandle}>
{ selectedCoinData ? (
<Chart
currentPrice={selectedCoinData.current_price}
logoUrl={selectedCoinData.image}
name={selectedCoinData.name}
symbol={selectedCoinData.symbol}
priceChange={selectedCoinData.price_change_percentage_7d_in_currency}
sparkline={selectedCoinData?.sparkline_in_7d.price}
/>
)
: null}
</BottomSheetModal>
</View>
</BottomSheetModalProvider>
</GestureHandlerRootView>
</SafeAreaView>
);
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.
Issue still present
Is this still being looked into or is there at least a known workaround? Still have the same issue on ios on expo (v44) maintained repo.
item.id} data={SAMPLE_DATA} renderItem={({ item }) => ( openModal(item)} /> )} ListHeaderComponent={ } /> { selectedCoinData ? ( ) : null}
Can you please post full code i can't make it work making me crazy lol PeroyNel
Or at least post a github repository with a working example please :) . Just very simple thank you
This issue happen only on iOS on new Expo GO app with managed workflow. Affected all scrollable components that was imported from react-native-bottom-sheet lib. On iOS production build and on Android there is no issues.
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.
.
Hello guys, any update regarding this issue?
Just to confirm, it is still happening on Expo Go IOS (on android it works just fine).
This issue is maybe more clear to describe the problem https://github.com/gorhom/react-native-bottom-sheet/issues/1008
Hi, any updates??
I still can't seem to figure out how to have the BottomSheet go up to the final snapping point and then enable BottomSheetScrollView scrolling. I need to manually drag the sheet into the final snap point and then scrolling is enabled. Followed every suggestion, still nothing. My app heavily depends on this feature and this even happens in production mode. Android works just fine.
I'm on Expo SDK 45
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.
This issue was closed because it has been stalled for 5 days with no activity.
+1
How is this not in the docs?
+1
Bug
iOS ONLY
I have created a bottom sheet and inside of it I have put BottomSheetScrollView because I have a list of Item that I want the user to scroll up and down when the sheet is fully opened. Everything was good on Expo Go App until I upgraded my Expo Go to the latest version 2.23.2. After upgrading the bottomSheetScrollView stopped responding to the Pan Gesture of the BottomSheet as it was before.
Environment info
Steps To Reproduce
Describe what you expected to happen:
Reproducible sample code
App.tsx
Content.tsx