'Guest scrollView when I scrolled to top
I write custom bottom sheet and inside PanGestureHandler I have ScrollView. Guest not work if I have scrollable content, but with scrollEnable={false} everything work. So, how I can trigger PanGestureHandler if I scrolled to top?
I try to write bottom audio banner like in Spotify or Youtube. You can open full media screen and swipe to bottom to open small audio banner
const { height, width } = Dimensions.get('window');
const TABBAR_HEIGHT = 100;
const MINIMIZED_PLAYER_HEIGHT = 130;
const SNAP_TOP = 0;
const SNAP_BOTTOM = height - TABBAR_HEIGHT - MINIMIZED_PLAYER_HEIGHT;
const snapPointsY = [SNAP_TOP, SNAP_BOTTOM];
const SpringConfig = {
damping: 15,
mass: 1,
stiffness: 150,
overshootClamping: false,
restSpeedThreshold: 0.1,
restDisplacementThreshold: 0.1,
};
export const BottomTabs = (props: BottomTabBarProps<BottomTabBarOptions>) => {
const { currentPosition } = useTypedSelector(item => item.playlist);
const translateY = useSharedValue(height);
const onGestureEvent = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { x: number; y: number }>({
onStart: (_, ctx) => {
// dont allow drag start if we're done editing
ctx.x = translateY.value;
},
onActive: ({ translationY }, ctx) => {
// dont allow drag if we're done editing
const traY = ctx.x + translationY;
if (traY > SNAP_TOP) {
translateY.value = traY;
}
},
onFinish: ({ translationY, velocityY }) => {
if (translateY.value > SNAP_BOTTOM + 20) {
translateY.value = withSpring(height, SpringConfig);
} else {
const snapPointX = snapPoint(translationY, velocityY, snapPointsY);
translateY.value = withSpring(snapPointX, SpringConfig);
}
},
});
return (
<>
<PanGestureHandler onGestureEvent={onGestureEvent}>
<Animated.View style={[styles.playerSheet, bannerStyle]}>
<VideoPlayerScreen />
<Animated.View
style={[
{
position: 'absolute',
top: 0,
left: 0,
right: 0,
width: '100%',
height: 200,
},
playerMiniStyle,
]}
>
<AudioPlayer />
</Animated.View>
</Animated.View>
</PanGestureHandler>
<Animated.View style={[{ height: TABBAR_HEIGHT }, tabStyle]}>
<BottomTabBar {...props} />
</Animated.View>
</>
);
};
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
