Open badalsaibo opened 5 months ago
+1
Exactly the same issue here, @badalsaibo did you found a solution to this?
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.
Having the same issue here
also having the same issue!
I am also having the same issue, has anyone found a solution?
Also having same issue here
@Acetyld I think for a fix I gave it a fixed height for iOS only.
const initialSnapPoints = useMemo(() => ['50%'], []);
I created a non adaptive component for iOS separately too
{
Platform.OS === "ios" ? (
<SearchTutorBottomSheetNonAdaptive
bottomSheetModalRef={tutorSearchBottomSheetRef}
handleClose={handleClose}
/>
) : (
<SearchTutorBottomSheet
bottomSheetModalRef={tutorSearchBottomSheetRef}
handleClose={handleClose}
/>
);
}
+1
I am also having this issue. Have tried a few things and can't resolve it. Would love to see a fix for this!
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 isn't stale. The issue is caused by the animatedIndex
being set back to -1 when the height changes. Logging the index using useAnimatedReaction in a custom backdrop component I can inspect this properly:
"form" is an update inside the modal which causes the height to change. Notice how the index jumps from -1 and back to 0
My current, sloppy, solution is to animate using useAnimatedReaction
so that I can compare the current and previous values. This way I can prevent the animation from happening when the value suddenly changes:
function AppBottomSheetBackdrop({animatedIndex, style}: BottomSheetBackdropProps) {
const sheet = useBottomSheet();
const opacity = useSharedValue(0);
useAnimatedReaction(() => animatedIndex.value, (current, previous) => {
if (current === -1 && previous === 0) return;
opacity.value = interpolate(
animatedIndex.value,
[-1, 0],
[0, 1],
Extrapolation.CLAMP
)
});
return (
<Animated.View
style={[
style,
{
backgroundColor: 'rgba(0,0,0,0.3)',
opacity
}
]}
>
...
@DaltonPelkey thanks, this works great!
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.
Bug
Environment info
Steps To Reproduce
Describe what you expected to happen:
Reproducible sample code
Videos / Images
https://github.com/gorhom/react-native-bottom-sheet/assets/14058003/341711bb-4c6e-4b83-9a6b-674633713fac