Is there an optimal way to disable parent scroll - react-native

Question

I am trying to disable parent scroll, when scrolling up/down in the child component (child component is a horizontal FlatList). Is there an optimal way?
<ScrollView scrollEnabled={scrollEnabled}>
<Header />
<FlatList
horizontal={true}
data={cards}
renderItem={() => (
<Pressable onPressIn={() => setScrollEnabled(false)} onPressOut={() => setScrollEnabled(true)}>
<ScrollingCard />
</Pressable>
)}
keyExtractor={(item) => item.toString()}
/>
{cards.map((item) => <ScrollingCard key={`vertical-${item}`} item={item} type="Vertical" />)}
</ScrollView>

Answer 1

Declare a state:-
const [data, setData] = useState({
username: "Mark White",
enableScrollViewScroll: true
})
Handle state when scroll:-
const onEnableScroll = (value) => {
setData({
...data,
enableScrollViewScroll: value
})
}
Inside component:-
<ScrollView
showsVerticalScrollIndicator={false}
scrollEnabled={data.enableScrollViewScroll}>
<View>
<FlatList
onTouchStart={() => {
onEnableScroll(false);
}}
onMomentumScrollEnd={() => {
onEnableScroll(true);
}}
...
/>
</View>
</ScrollView>

Answer 2

export const ScrollEnabledContext = createContext(null);
const Parent = () => {
const ref = useRef(null);
const setIsEnabled = (bool) => {
ref.current?.setNativeProps({ scrollEnabled: bool });
};
return (
<ScrollEnabledContext.Provider value={setIsEnabled}>
<ScrollView ref={ref} nestedScrollEnabled={true}>
<ChildScrollView />
</ScrollView>
</ScrollEnabledContext.Provider>
);
};
const ChildScrollView = () => {
const value = useContext(ScrollEnabledContext);
return (
<ScrollView onTouchStart={() => value(false)} onTouchEnd={() => value(true)}>
....
</ScrollView>
);
};
It works without any re-renders and works way faster than setting state.