How compatible with tabs view and drawer at the same time?

[songispm]

The example of PagerView is not compatible with Drawer's sliding. Unable to open expo's Drawer by sliding

I know that react-native-tab-view is compatible with Drawer
but I don't know how to use it in react-native-header-motion

Can you give me more examples

[songispm]

import { useState } from "react";
import { StyleSheet, useWindowDimensions, View, Text } from 'react-native';
import { Stack } from 'expo-router';
import HeaderMotion, {
    AnimatedHeaderBase,
    useActiveScrollId,
    type WithCollapsiblePagedHeaderProps,
} from 'react-native-header-motion';
import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
import { SceneMap, TabView } from "react-native-tab-view";
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import {
  DynamicBox,
  TabButton,
  generateContent,
} from '@/components';


const indexToKeyMap: { [key: string]: string } = {
    0: 'page1',
    1: 'page2',
};
const keyToIndexMap: { [key: string]: number } = {
    page1: 0,
    page2: 1,
}

function FirstRoute() {
    return (
        <HeaderMotion.ScrollManager scrollId="page1">
            {(scrollViewProps, { originalHeaderHeight }) => (
                <Animated.ScrollView
                    {...scrollViewProps}
                    contentContainerStyle={{ paddingTop: originalHeaderHeight }}
                >
                    {content}
                </Animated.ScrollView>
            )}
        </HeaderMotion.ScrollManager>
    )
}

function SecondRoute() {
    return (
        <HeaderMotion.ScrollManager scrollId="page2">
            {(scrollViewProps, { originalHeaderHeight }) => (
                <Animated.ScrollView
                    {...scrollViewProps}
                    contentContainerStyle={{ paddingTop: originalHeaderHeight }}
                >
                    {content}
                </Animated.ScrollView>
            )}
        </HeaderMotion.ScrollManager>
    )
}

export default function Screen() {
    const [activeScrollId, setActiveScrollId] = useActiveScrollId<string>('page1');
    const [routes] = useState([
        { key: 'page1', title: 'First' },
        { key: 'page2', title: 'Second' },
    ]);

    const handleTabPress = (key: string) => {
        setActiveScrollId(key);
    };

    const layout = useWindowDimensions();

    return (
        <HeaderMotion activeScrollId={activeScrollId.sv}>
            <HeaderMotion.Header>
                {(headerProps) => (
                    <Stack.Screen
                        options={{
                            header: () => (
                                <CollapsibleHeader
                                    {...headerProps}
                                    activeTab={activeScrollId.state}
                                    onTabChange={handleTabPress}
                                />
                            ),
                        }}
                    />
                )}
            </HeaderMotion.Header>

            <TabView
                navigationState={{ index: keyToIndexMap[activeScrollId.state], routes }}
                renderTabBar={() => null}
                renderScene={SceneMap({
                    page1: FirstRoute,
                    page2: SecondRoute,
                })}
                onIndexChange={(targetIndex) => setActiveScrollId(indexToKeyMap[targetIndex])}
                initialLayout={{ width: layout.width }}
            />
        </HeaderMotion>
    );
}

function CollapsibleHeader({
    progress,
    measureTotalHeight,
    measureDynamic,
    progressThreshold,
    activeTab,
    onTabChange
}: WithCollapsiblePagedHeaderProps) {
    const insets = useSafeAreaInsets();

    // 1. Container Animation (Moves UP)
    const containerStyle = useAnimatedStyle(() => {
        const translateY = interpolate(
            progress.value,
            [0, 1],
            [0, -progressThreshold],
            Extrapolation.CLAMP
        );
        return { transform: [{ translateY }] };
    });

    // 2. Content Animation (Parallax + Opacity + Scale)
    const boxSectionStyle = useAnimatedStyle(() => {
        const parallaxTranslateY = interpolate(
            progress.value,
            [0, 1],
            [0, progressThreshold * 0.5],
            Extrapolation.CLAMP
        );
        const opacity = interpolate(
            progress.value,
            [0, 0.6],
            [1, 0],
            Extrapolation.CLAMP
        );
        const scale = interpolate(
            progress.value,
            [0, 1],
            [1, 0.8],
            Extrapolation.CLAMP
        );
        return {
            opacity,
            transform: [{ translateY: parallaxTranslateY }, { scale }],
        };
    });

    return (
        <AnimatedHeaderBase
            onLayout={measureTotalHeight}
            style={[styles.headerWrapper, { paddingTop: insets.top }, containerStyle]}
        >
            <View style={styles.dynamicContent}>
                <Animated.View
                    style={[styles.boxContainer, boxSectionStyle]}
                    onLayout={measureDynamic}
                >
                    <DynamicBox />
                    <DynamicBox />
                </Animated.View>
            </View>

            <View style={styles.tabBar}>
                <TabButton
                    label="Page 1"
                    isActive={activeTab === 'page1'}
                    onPress={() => onTabChange('page1')}
                />
                <TabButton
                    label="Page 2"
                    isActive={activeTab === 'page2'}
                    onPress={() => onTabChange('page2')}
                />
            </View>
        </AnimatedHeaderBase>
    );
}

const styles = StyleSheet.create({
    pagerView: {
        flex: 1,
    },
    dynamicContent: {
        overflow: 'hidden',
    },
    headerWrapper: {
        backgroundColor: '#304077',
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(0,0,0,0.1)',
    },
    boxContainer: {
        flexDirection: 'row',
        gap: 6,
        padding: 12,
        alignItems: 'stretch',
        overflow: 'hidden',
    },
    tabBar: {
        flexDirection: 'row',
        backgroundColor: '#FFF',
        borderTopWidth: 1,
        borderTopColor: '#EEE',
        paddingBottom: 4,
    },
    pageLabel: {
        fontSize: 24,
        fontWeight: 'bold',
        padding: 20,
        textAlign: 'center',
    },
});

const content = generateContent({
    count: 500,
    backgroundColor: '#E3CBFC',
    textColor: '#304077',
});

[songispm]

that works

[pawicao]

Hey, I didn't test it with tab view when developing, I'll look into it as well to see if I have some recommendation for this use case. Thank you for the code snippet.

[pawicao]

Hello! So far I was focused on other features so this had to be postponed for a bit but as v1 is approaching, I will be working on other things as follow up, including this issue.

I would invite you to take a look at the newest v1 beta release (or the stable v1 release that is coming in a few days). Once that happens, in case there your issue still stands, I would appreciate a minimal reproduction scenario that breaks, so I can see what I can do about it.

Thanks!