PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
830 stars 161 forks source link

onScroll and some other props of ScrollView are not available #203

Closed Damon-Zhong closed 2 years ago

Damon-Zhong commented 2 years ago

Feature request

As the doc suggests Tabs.ScrollView should function like a normal ScrollView, but currently there are some props missing.

Current behavior

onScroll is missing and onScrollBeginDrag, onScrollAnimationEnd are not functioning when there is nested FlatList/ScrollView within Tabs.ScrollView/Tabs.FlatList

Screenshots (if applicable)

Repro code snippet: `import React from "react"; import { View, StyleSheet, FlatList, Text } from "react-native"; import { Tabs } from "react-native-collapsible-tab-view";

const HEADER_HEIGHT = 250;

const Header = () => { return ; };

const App: React.FC = () => { return ( <Tabs.Container renderHeader={Header} headerHeight={HEADER_HEIGHT} // optional

console.log("onScrollBeginDrag")} onScrollAnimationEnd={() => console.log("onScrollAnimationEnd")} onScroll={() => console.log("onScroll not exposed")} console.log("onScroll FlatList")} keyExtractor={(item) => item.toString()} renderItem={({ item }) => ( {item} )} /> ); };

const styles = StyleSheet.create({ box: { height: 250, width: "100%", }, boxA: { backgroundColor: "white", }, boxB: { backgroundColor: "#D8D8D8", }, header: { height: HEADER_HEIGHT, width: "100%", backgroundColor: "#2196f3", }, });

export default App; `

ianfelix commented 2 years ago

I have the same problem, did you solve it?

hirbod commented 2 years ago

Well you can't just overwrite onScroll here. U need to use the provided hooks and methods if you want to trigger events on scroll.

https://github.com/PedroBern/react-native-collapsible-tab-view/blob/main/src/ScrollView.tsx#L115 As you can see, onScroll is set AFTER ...rest, so it will overwrite your onScroll method.

These event's are needed to make all the collapsible magic happen here.

linweiboy commented 1 year ago

Well you can't just overwrite onScroll here. U need to use the provided hooks and methods if you want to trigger events on scroll.

https://github.com/PedroBern/react-native-collapsible-tab-view/blob/main/src/ScrollView.tsx#L115 As you can see, onScroll is set AFTER ...rest, so it will overwrite your onScroll method.

These event's are needed to make all the collapsible magic happen here.

I need to monitor which Hooks scrollY should use in real time