How to make scroll view scroollabe inside panGestureHandler?

Question

I am using a react-native-gesture-handler library with reanimated and react-native-redash. I want to make scrollView scrollable which is nested inside panGestureHandler but all the interactions are handled by panGestureHandler, so scrollView is not working. Here is my code.

VideoModal.js file

import Animated , {useCode , cond , eq , set , add, block, interpolate, Extrapolate} from "react-native-reanimated"
import {PanGestureHandler , State } from "react-native-gesture-handler"
import {usePanGestureHandler , useValue , timing , snapPoint} from "react-native-redash/lib/module/v1"



export default function VideoModal(props) {



const { video } = props;
const {gestureHandler , velocity , translation , state} = usePanGestureHandler()
const translateY = useValue(0)
const offsetY = useValue(0);
const snapPoints = snapPoint(translateY , velocity.y , [0 ,upperBound])

useCode(()=>block([

  cond(
    eq(state , State.ACTIVE),
    [
      set(translateY , add(offsetY , translation.y))
    ]
  ),


  cond(
    eq(state , State.END),
    [
      set(translateY , timing({from:translateY , to:snapPoints, duration:350})),
      set(offsetY , translateY) 
    ]
  )
  
  ]))


return (
  <>
    <View
      style={{
        height: statusBarHeight,
        backgroundColor: 'black',
      }}
    />
    <PanGestureHandler {...gestureHandler} >
    <Animated.View
      style={{
        ...shadow,
        transform:[{translateY:translateY}],
        zIndex:10
      }}
    >
    <TouchableWithoutFeedback onPress={()=>alert('Working'}>
      <View style={{ backgroundColor: 'white', width }}>
        <View style={{ ...StyleSheet.absoluteFillObject }}>
          <PlayerControls title={video.title} onPress={() => alert('abc')} />
        </View>
        <AnimatedVideo
          source={video.video}
          style={{ width, height:videoContent  }}
          resizeMode={Video.RESIZE_MODE_COVER}
          shouldPlay
        />
      </View>
    </TouchableWithoutFeedback>
      <Animated.View style={{ backgroundColor: 'white', width:contentWidth, height:contentHeight }}>
        <Animated.View style={{opacity:contentOpacity}}>
          **<VideoContent {...{ video }} />**
        </Animated.View>
      </Animated.View>
    </Animated.View>
    </PanGestureHandler>
  </>
);

}

the scrollView is inside VideoContent

import {
  View, StyleSheet, Text, Image, ScrollView,
} from 'react-native';

export default function VideoContent(props) {

const { video } = props;
return (
  
  <ScrollView>
    <View style={styles.upNext}>
      <Text style={styles.upNextTitle}>Up next</Text>
      {
        videos.map(v => (
          <View key={v.id} style={styles.thumbnail}>
            <Image source={v.thumbnail} style={styles.thumbnailImage} />
            <View style={styles.thumbnailContent}>
              <Text numberOfLines={2} style={styles.thumbnailTitle}>{v.title}</Text>
              <Text style={styles.thumbnailUsername}>{v.username}</Text>
            </View>
          </View>
        ))
      }
    </View>
  </ScrollView>
  
);

}

Is there anyway I can tell pangesture to work only if the finger is placed on the top part of screen otherwise it should not work and i can scroll the content present inside the scrollview??

Therontheropod

Answer 1

Hey i Know its bit late to reply to your answer but i also faced the similar issue, a bit of research unable to me find this trick

activeOffsetX={[-10, 10]}

in you pangestureHandler like this

 <PanGestureHandler
     onGestureEvent={onGestureEvent}
     activeOffsetX={[-10, 10]} 
     onHandlerStateChange={evt =>handleStateChange(evt)}
     >

source : https://www.gitmemory.com/issue/software-mansion/react-native-gesture-handler/1380/786721032

I hope it helps

Votaw

this works also for a pangesturehandler inside a scrollview, if you want to disable the handler when scrolling vertically to use the scrollview instead, thank you! solved my issue, was looking for this fix for a while! – Rucker

The link above is broken, and there are too many edits pending. Should be: github.com/software-mansion/react-native-gesture-handler/issues/… – Printmaker