ScrollView not scrollable inside an AnimatedView

Question


  const [scrollDirection, setScrollDirection] = useState('');

  const translateY = useSharedValue(0);
  let previousY = 0;
  const context = useSharedValue({y: 0});
  const isDragging = useSharedValue(false);

  const longPressGesture = Gesture.LongPress()
    .onStart(() => {
      isDragging.value = true;
    })
    .minDuration(250);

  const gesture = Gesture.Pan()
    .onStart(() => {
      context.value = {y: translateY.value};
    })
    .onUpdate((event) => {
      if(event.translationY > previousY){
        runOnJS(setScrollDirection)('down');
      } else{
        runOnJS(setScrollDirection)('up');
      }
      translateY.value = event.translationY + context.value.y;
      translateY.value = Math.max(translateY.value, canOpenMaxHeight ? MAX_TRANSLATE_Y : MIN_TRANSLATE_Y)
      previousY = event.translationY;
    })
    .onEnd(() => {
      if (translateY.value > MIN_TRANSLATE_Y && scrollDirection==='down'){
        translateY.value = withSpring(0, {damping: 20});
        runOnJS(setCloseSheet)(true);
      } else if (translateY.value < MIN_TRANSLATE_Y && scrollDirection==='up'){
        if(canOpenMaxHeight){ 
          translateY.value = withSpring(MAX_TRANSLATE_Y, {damping: 20}, () => {
            runOnJS(setCloseSheet)(false);
          });
        } else{
          translateY.value = withSpring(MIN_TRANSLATE_Y, {damping: 20}, () => {
            runOnJS(setCloseSheet)(false);
          });
        }
      } else if(translateY.value > MAX_TRANSLATE_Y && scrollDirection==='down'){
        translateY.value = withSpring(MIN_TRANSLATE_Y, {damping: 20});
      }
    })

    const composedGesture = Gesture.Race(gesture, longPressGesture);

  const bottomSheetStyle = useAnimatedStyle(() => {
    return {
      transform: [{translateY: translateY.value}],
    }
  });

  useEffect(() => {
    if(visible){
      translateY.value = withSpring(MIN_TRANSLATE_Y, {damping: 20}, () => {
        runOnJS(setCloseSheet)(false);
      });
    }
  },[visible])

  if(!visible){
    return null;
  }

  const onOverlayPress = () => {
    translateY.value = withSpring(0, {damping: 20});
    setCloseSheet(true);
  }
  return (
    <>
      <View style={styles.overlay}>
        <TouchableWithoutFeedback onPress={onOverlayPress} style={{width: '100%', height: '100%'}}>
        </TouchableWithoutFeedback>
      </View>
          <Animated.View style={[styles.container, bottomSheetStyle]}>
          <GestureDetector gesture={gesture}>
              <View style={styles.headerContainer}>
                <View style={styles.header} />
              </View>
          </GestureDetector>
            <ScrollView>
                {children}
            </ScrollView>
          </Animated.View>
    </>
  );
};

It's supposed to be a scrollable bottomsheet. I hoped removing the children and the scrollview outside the gestureDetector would make it scrollable but it still isn't working. Any idea what is going wrong? I need to be able to animate the view so that i can drag the content inside the scrollview along with it.

ScrollView not scrollable inside an AnimatedView

0 Answers0