How catch event onScoll or onScollEnd etc of HScrollview

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"

wowandy · Answer 1 · 2021-08-26T16:19:58.743

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 */}
/>

How catch event onScoll or onScollEnd etc of HScrollview

1 Answers1