React Navigation animation from Drawer to Stack

Question

I have some Drawer navigation

<Drawer.Navigator
      screenOptions={
        drawerStatus ? screenOptions : {...screenOptions, swipeEnabled: false}
      }
      drawerContent={props => <CustomDrawer {...props} />}
      initialRouteName={'Main'}>
      {screens.map(screen => (
        <Drawer.Screen
          key={screen.name}
          name={screen.name}
          component={screen.component}
        />
      ))}
</Drawer.Navigator>

And in this Drawer I have a nested screen "Post Detail"

    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name={'PostDetail'} component={PostDetail} />
  </Stack.Navigator>

If I navigate from Drawer to nested StackScreen or go back to Drawer, I don`t catch animation transition.

Answer 1

Apparently, using only the 'createDrawerNavigator', it is not possible to change the screen transition animation. For this, you must create a 'createStackNavigator', inserting your DrawerNavigator in your 'Home'. Do like:

import React from 'react';
import Home from '../pages/home/home';
import HeaderHome from '../shared/headerHome';
import Configuracoes from '../pages/configuracoes';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { DrawerContent } from '../shared/drawerContent';

const Drawer = createDrawerNavigator();
const Content = (navigation: any) => (
    <Drawer.Navigator
        drawerContent={props => <DrawerContent {...props} />}
    >
        <Drawer.Screen name="HomeDrawer" component={Home}
            options={{
                header: (props) => <HeaderHome value={props} /> //My cystom Header
            }}
        />
    </Drawer.Navigator>
);

const Stack = createStackNavigator();
const MyStack: React.FC = () => {
    return (
        <Stack.Navigator
            screenOptions={({ route, navigation }) => ({
                headerMode: "float",
                animationEnabled: true
            })}
        >
            <Stack.Screen name="Home" component={Content} //The name used cannot be identical to the one used in Drawer.Navigator
                options={{ headerShown: false }}
            />
            <Stack.Screen name="Configuracoes" component={Configuracoes}
                options={{
                    title: "Title page",
                    headerStyle: {
                        backgroundColor: "red",
                    },
                    headerTintColor: "#fff"
                }}
            />
        </Stack.Navigator>
    );
}

export default MyStack;