Decouple tab header from tab body?

[Aryk]

trafficstars

Is there anyway to decouple the tab header from the tab body?

What I mean is, one can create an Animated.Value and pass it in both to the header and body and split the two components apart.

What I am trying to achieve is for the header to be sticky and stay on the top of the content area (similar to what you see on the instagram profile screens).

It is important that the tab header underline still moves according to gestures on the body.

[bang9]

try like this way, but i'm not tested

const HEADER_HEIGHT = 300;
const COLLAPSED_HEIGHT = AppStyles.tabBarHeight + AppStyles.navBarHeight;
const SCROLLABLE_HEIGHT = HEADER_HEIGHT - COLLAPSED_HEIGHT;

const scrollAnim = React.useRef(new Animated.Value(0)).current;
const translateY = scrollAnim.interpolate({
    inputRange: [0, SCROLLABLE_HEIGHT],
    outputRange: [0, -SCROLLABLE_HEIGHT],
    extrapolate: "clamp"
});

return <View>
    <YourHeader style={{ height:HEADER_HEIGHT, transform: [{ translateY }] }} />
    <ScrollableTabView>
        <Animated.ScrollView 
            contentContainerStyle={{
                paddingTop: HEADER_HEIGHT
            }}
            onScroll={Animated.event([
                            { nativeEvent: { contentOffset: { y: scrollAnim } } }
            ])}
        />
        <YourTab2 />
    </ScrollableTabView>
</View>

[zyslife]

You can try the react-native-head-tab-view. (tabs with collapsible header)

[wublack]

@zyslife android is not good!

[wublack]

The view compatible with IOS and Android react-native-scrollable-tabview