React Native Touchables don't work inside a ScrollView Component

Question

I have spent hours trying to fix this issue, but can't seem to get around it. I am using react-native-cube-navigation library to incorporate cube navigation into my app. Inside the cube navigation, I have videos that are pulled from a database that play when inserted. I have created a working pause function, but when the videos are places inside of CubeNavigation, the pause function stops working, as well as all buttons on screen. CubeNavigation uses a Animated.ScrollView, so I need to figure out how to allow touchable to work inside of this.

This is the code from the home Screen.

CubeNavigation>
            
         {posts.map(
          ({url, owner, description, encores, comments, shares}) => (
      <View style={[styles.container, { backgroundColor: "#ddd" }]}>
        <Videos url={url} owner={owner} description={description} encores={encores} comments={comments} shares={shares}/>
      </View>
        )
      )}
      
        </CubeNavigation>

This is the code from Videos.js

<TouchableWithoutFeedback onPress={() => setPlaying(!playing)} >
          <View style={{flex:1}}>
          <Video
            paused={playing}
            style={[styles.backgroundVideo, {width: w, height: h}]}
            source={{uri: url}}
            repeat
            ref={videoRef}
            resizeMode="cover"
            retainOnceInViewPort={false}
          />
          </View>
          </TouchableWithoutFeedback>