React Navigation animation from Drawer to Stack - react-navigation

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;