title: How can we create a drawer navigation in another component and just call it in the app.js
body: <p>I'm new to react native and working on react navigation 5. In react navigation 4, with the help of createAppContainer we can import our navigation component and call it in the app.js. how can we do the same thing with react navigation 5.</p>
  <p>here's my code</p>
  <pre><code>//drawer Component
  import AccountsScreen from &quot;../screens/AccountsScreen&quot;;
  import CategoriesScreen from &quot;../screens/CategoriesScreen&quot;;
  import FavouritesScreen from &quot;../screens/FavouritesScreen&quot;;
  import HomeScreen from &quot;../screens/HomeScreen&quot;;
  import SettingsScreen from &quot;../screens/SettingsScreen&quot;;
  import TrendsScreen from &quot;../screens/TrendsScreen&quot;;
  import { MaterialCommunityIcons } from &quot;@expo/vector-icons&quot;;
  const Drawer = createDrawerNavigator();
  
  const AppDrawer = () =&gt; {
    return (
      &lt;NavigationContainer&gt;
        &lt;Drawer.Navigator
          initialRouteName=&quot;Home&quot;
          drawerContentOptions={{
            activeTintColor: &quot;#555&quot;,
          }}
        &gt;
          &lt;Drawer.Screen
            name=&quot;Home&quot;
            component={HomeScreen}
            options={{
              drawerIcon: ({ focused, color, size }) =&gt; (
                &lt;MaterialCommunityIcons
                  style={{ fontSize: size, color: color }}
                  name={focused ? &quot;home&quot; : &quot;home-outline&quot;}
                /&gt;
              ),
            }}
          /&gt;
          &lt;Drawer.Screen name=&quot;Accounts&quot; component={AccountsScreen} /&gt;
          &lt;Drawer.Screen name=&quot;Categories&quot; component={CategoriesScreen} /&gt;
          &lt;Drawer.Screen name=&quot;Trends&quot; component={TrendsScreen} /&gt;
          &lt;Drawer.Screen name=&quot;Favourites&quot; component={FavouritesScreen} /&gt;
          &lt;Drawer.Screen name=&quot;Settings&quot; component={SettingsScreen} /&gt;
        &lt;/Drawer.Navigator&gt;
        &lt;/NavigationContainer&gt;
    );
  };
  export default AppDrawer;
  
  
  //App.js
  import React from &quot;react&quot;;
  
  import &quot;react-native-gesture-handler&quot;;
  import { createDrawerNavigator } from &quot;@react-navigation/drawer&quot;;
  
  import AppDrawer from &quot;./route/AppDrawer&quot;;
  const Drawer = createDrawerNavigator();
  
  export default function App() {
    return &lt;AppDrawer /&gt;;
  }
  </code></pre>