react-nativenavigationstack-navigatorreact-navigation-drawer

React Native drawer navigator to stack navigator missing transition animation


I have a functional Drawer navigator that holds a Stack navigator as shown below:

function DrawerNavigator() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen
                name="Categories"
                component={CategoriesScreen}
                ... />
                    ),
                }}
            />
            <Drawer.Screen
                ...
        </Drawer.Navigator>
    );
}
...
return (
        <>
           ...
                <NavigationContainer onReady={onLayoutRootView}>
                    ...
                        <Stack.Screen
                            name="MealCategories"
                            component={DrawerNavigator}
                            options={{ headerShown: false }}
                        />

While in the 'Favorites' screen, which is registered under the Drawer Navigator, when attempting to navigate to 'Categories' page which is registered under Stack navigator (but pointed to using Drawer navigator) using navigation.navigate(), there's no navigation animation.

const buttonPressHandler = () => {
        navigation.navigate("Categories");
    };

Solution

  • Yup it seems the drawer navigator has no support for screen animation. So it all looks great when using the drawer to navigate. But if navigating through links in the page or actions, theres no navigation animation between screens. Been hunting for hours now and I think its simply not implemented.