How catch event onScoll or onScollEnd etc of HScrollview - reactjs

Question

I am using
import {CollapsibleHeaderTabView} from "react-native-tab-view-collapsible-header";
import {HScrollView} from "react-native-head-tab-view";
I push a FlastList into HScrollView
<HScrollView
index={0}
style={{backgroundColor: "#FFFFFF"}}
// onScroll={(event)=>console.log("hitme2")}
// onScroll={()=>console.log("hitme")}
>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
onEndReached={onEndReached}
/>
</>
Event onEndReached of flashlist will not working instead of that scroll off Hscrollview working.
I want catch event of Hscollview to make custom same onEndReached.
Please help me!
React: "16.13.1"
React Native: "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz"
React-Native-Gesture-Handler: "^1.10.3"

Answer 1

You're in luck because I recently had a similar problem and found a solution :)
// imports
import React, {useCallback} from "react";
import {runOnJS, useAnimatedReaction, useSharedValue} from "react-native-reanimated";
import {CollapsibleHeaderTabView} from "react-native-tab-view-collapsible-header";
// component logic
const doSomething = useCallback((...args) => {/* do something */}, []);
const [scrollTrans, setScrollTrans] = useState(useSharedValue(0));
useAnimatedReaction(() => scrollTrans.value, (scrollTransValue) => {
console.log('scroll value', scrollTransValue);
/* do something here */
runOnJS(doSomething)(/* put args here */);
}, [doSomething, scrollTrans]);
const makeScrollTrans = useCallback((scrollTrans) => {
setScrollTrans(scrollTrans);
}, []);
// CollapsibleHeaderTabView
<CollapsibleHeaderTabView {...args} makeScrollTrans={makeScrollTrans}/>
You need to call some functions inside runOnJS function because react-native-reanimated since v2 running on a different thread
Also, instead of HScrollView you can use HFlatList like this:
<HFlatList
index={0}
data={data}
renderItem={renderItem}
keyExtractor={keyExtractor}
onEndReached={onEndReached}
{/* rest FlatList props */}
/>