Header not scrollable

[dan-fein]

Current behavior

Currently when I scroll on the header it doesn't move the position, despite adding pointer events.

Expected behaviour

Would expect it to scroll

Code sample

const { useTabsContext, ...Tabs } = createCollapsibleTabs()

const Page = () => {
    const [index, setIndex] = useState(0);
    const containerRef = useAnimatedRef()
    const postsTabRef = useAnimatedRef()
    const detailsTabRef = useAnimatedRef()
    const itemsTabRef = useAnimatedRef()
    const similarTabRef = useAnimatedRef()
    let refs = {
                    Posts: postsTabRef,
                    Details: detailsTabRef,
                    Items: itemsTabRef,
                    Similar: similarTabRef 
                }
    const [refMap, setRefMap] = React.useState(refs)
    const Header = () => {
        return (<View pointerEvents="box-none" style={{ width: windowWidth }}>
                  <TouchableOpacity onPress={toggleImage}>
                      <Image source={{ uri: thing.image || "https://picsum.photos/500" }} style={{ flex: 1, alignSelf: 'center', width: 200, height: 200, borderRadius: 200*.42 }} />
                  </TouchableOpacity>
                </View>
                )
          }

    return (<Tabs.Container
                containerRef={containerRef}
                headerHeight={headerHeight} // optional
                HeaderComponent={Header}
                refMap={refMap}
                scrollEnabled = {true}
                onIndexChange={setIndex}
                >
                <Tabs.ScrollView style={{ width: windowWidth, height: 600, backgroundColor: 'red'}} contentContainerStyle={{ height: "100%" }}>
                    <View><Text>Hello</Text></View>
                </Tabs.ScrollView>
                <Tabs.ScrollView style={{ width: windowWidth, height: 600, backgroundColor: 'orange'}} />
                <Tabs.ScrollView style={{ width: windowWidth, backgroundColor: 'yellow'}} />
                <Tabs.ScrollView style={{ width: windowWidth, backgroundColor: 'green'}} />

                </Tabs.Container>
        )
}

Screenshots (if applicable)

N/A, just imagine a header trying to be scrolled and not going anywhere

What have you tried

I've tried adding the relevant pointer-events

[PedroBern]

Probably the TouchableOpacity is becoming the target of the touch event. Can you scroll if you remove it?

[dan-fein]

Ah that worked, removed them all and was able to find a little real estate to scroll with. What have you seen as best practice for having touchable components but scrollable headers? (Also, thanks a lot for maintaining this so actively, it seems really promising and I'm excited to use it!)

[PedroBern]

What have you seen as best practice for having touchable components but scrollable headers

Keep them small as possible! 😄

Or try using touchables from https://docs.swmansion.com/react-native-gesture-handler/docs/component-touchables.

Or maybe just stop capturing on move (https://reactnative.dev/docs/panresponder).

I didn't try. If you find a better answer please let know!

(Also, thanks a lot for maintaining this so actively, it seems really promising and I'm excited to use it!)

You are welcome!

[PedroBern]

I'm closing

[lucianobracco-geojam]

Hello, can we open this issue. I have a header with a touchable (TouchableWithoutFeedback). I have tried using the touchables from react-native-gesture-handler with no luck. Do you have any other tip?