How to make child prevent ScrollView from scrolling - react-native

Question

Context:
I have a graph, where I allow a user to "scrub" their finger over the graph, and see a tooltip
This graph is nested inside a ScrollView
<ScrollView>
<Graph>
</ScrollView>
Problem:
I want to "disable" the scroll view when the touch is happening over that graph
I'm not sure how to do that.
function Graph() {
return (
<View onTouchStart={e => /* prevent ScrollView from scrolling */} />
)
}
I know about scrollEnabled on ScrollView, but it won't be easy for me to thread that prop. Is there a way I can just "stop propagation" for that touch event, inside Graph?
onTouchStart={(e) => e.stopPropagation()} does not do the trick

Answer 1

My current solution is the following:
import React, { createContext, useRef } from "react";
import { ScrollView } from "react-native";
export const ScrollEnabledContext = createContext(null);
export default function StoppableScrollView(props) {
const ref = useRef(null);
const setIsEnabled = (bool) => {
ref.current && ref.current.setNativeProps({ scrollEnabled: bool });
};
return (
<ScrollEnabledContext.Provider value={setIsEnabled}>
<ScrollView ref={ref} {...props} />
</ScrollEnabledContext.Provider>
);
}
By using setNativeProps, I prevent a render. I can reference ScrollEnabledContext in the child component to prevent scrolls. A bit brittle, but gets the job done. Would be fantastic if I didn't have to do this, and could use something like stopPropagation