PedroBern / react-native-collapsible-tab-view

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

how can i make change StatusBar and sticky header in tabs.SectionList? #274

Closed SHS-Technology closed 1 year ago

SHS-Technology commented 1 year ago

https://user-images.githubusercontent.com/77146494/177049386-6b3bb259-eacc-49c3-8fa5-b4cf017307e8.mp4

i want make like this i know scroll header position use 'useCurrentTabScrollY' and 'useHeaderMeasurements' but it just only know in header if i use props function it make error error i need 'useCurrentTabScrollY' and 'useHeaderMeasurements' values take out component because sticky statusbar is outside and sticky menubar in tabs.scrollview not in header plz help me react-native-collapsible-tab-view version is "react-native-collapsible-tab-view": "^5.0.0-rc.13",

 <Tabs.Container
                    // onMoveStart={onMoveStart}
                    headerContainerStyle={style5}
                    ref={tabRef}
                    minHeaderHeight={52 + inset.top}
                    lazy={false}
                    // revealHeaderOnScroll={true}
                    // onScroll={(event) => {
                    // }}
                    onIndexChange={(index, tabName) => {
                    }}
                    renderTabBar={(props) => (
                        <MaterialTabBar
                            {...props}
                            scrollEnabled
                            style={{paddingHorizontal: 20, borderBottomColor: '#EEEEEE', borderBottomWidth: 1}}
                            labelStyle={Object.assign(
                                {
                                    fontSize: 15,
                                },
                                Fonts.NOTOSANS.BOLD,
                            )}
                            indicatorStyle={{backgroundColor: '#FF8864', width: 50}}
                            activeColor={'#FF8864'}
                            inactiveColor={'#999999'}
                        />
                    )}
                    renderHeader={() =>
                        <Header
                            isLoading={isLoading}
                            detail={detail}
                            offsetCheck={(aww)=>{
                                console.log(aww)
                            }}
                        />
                    }>
                    {isLoading === false &&
                        detail?.categoryList?.map((item2, index) => {
                            return renderCategoryList(item2, index);
                        })}
                </Tabs.Container>

export const Header = (props) => {
    let afterColor = {color: '#FF8864'};
    let beforeColor = {color: '#333333'};
    const headerTop = useHeaderMeasurements();
    const scrollY = useCurrentTabScrollY();
    const [checkTop, setCheckTop] = useState(scrollY);
    const offset = useSharedValue(0);
    useEffect(() => {
        props.offsetCheck(checkTop)
    }, [checkTop]);
    useDerivedValue(() => {
        if (headerTop.top.value >= -250) {
            console.log('top', -headerTop.top.value.toFixed(0));
            // if (-headerTop.top.value.toFixed(0) > 100) {
            //     offset.value = 100;
            // } else {
            //     offset.value = -headerTop.top.value.toFixed(0);
            // }
        }
        // console.log('top', scrollY.value.toFixed(0));
        setCheckTop(-headerTop.top.value.toFixed(0))
    });
andreialecu commented 1 year ago

The error you're seeing is coming from the way you use Reanimated. Check the Reanimated documentation, or see https://github.com/software-mansion/react-native-reanimated/discussions/1571

You likely need runOnJS somewhere.