title: How to use Drawer Navigator & Stack Navigator combined in react-native?
body: <p><strong>Packages Used:</strong></p>
  <ol>
  <li>&quot;@react-navigation/drawer&quot;: &quot;^6.1.8&quot;,</li>
  <li>&quot;@react-navigation/native&quot;: &quot;^6.0.6&quot;,</li>
  <li>&quot;@react-navigation/stack&quot;: &quot;^6.0.11&quot;,</li>
  </ol>
  <p><strong>Problem :</strong></p>
  <p><strong>Image 1,2 &amp; 3:</strong> I have implemented drawer which shows two option as HomePage and Terms &amp; Condition. If you click on t&amp;c option it opens its screen and same if you click on homescreen it goes back to homepage screen.</p>
  <p><strong>Image 1 &amp; 4:</strong> I have made &quot;Click for details page&quot; text as clickable on HomeScreen and after I click it should go to details screen but throws error as image 4 I am confused on how to implement it. Where do I write Stack.Navigation code.</p>
  <img src="https://i.stack.imgur.com/ewXEh.jpg" width="500" />
  <p>App.js</p>
  <pre><code>import * as React from 'react';
  import { Button, View } from 'react-native';
  import { createDrawerNavigator } from '@react-navigation/drawer';
  import { NavigationContainer } from '@react-navigation/native';
  import HomeScreen from './Screens/HomeScreen';
  import DetailPage from './Screens/DetailPage';
  import TermsCondition from './Screens/TermsCondition';
  
  
  const Drawer = createDrawerNavigator();
  
  export default function App() {
    return (
      &lt;NavigationContainer&gt;
        &lt;Drawer.Navigator initialRouteName=&quot;HomeScreen&quot;&gt;
          &lt;Drawer.Screen name=&quot;HomeScreen&quot; component={HomeScreen} /&gt;
          &lt;Drawer.Screen name=&quot;Term&amp;Condition&quot; component={TermsCondition} /&gt;
        &lt;/Drawer.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  </code></pre>
  <p>HomeScreen.js</p>
  <pre><code>export default function HomeScreen({ navigation }) {
      return (
          &lt;TouchableOpacity onPress={() =&gt; navigation.navigate('DetailPage')}&gt;
              &lt;View style={{ flexDirection: 'row' }}&gt;
                  &lt;Text style={{ fontSize: 50 }}&gt;Click for Details Page&lt;/Text&gt;
              &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
      );
  }
  </code></pre>
  <p>TermsCondition.js</p>
  <pre><code>function TermsCondition({ navigation}) {
      return (
        &lt;View style={{ flexDirection: 'row' }}&gt;
          &lt;Text style={{fontSize:50}}&gt;T&amp;C Page&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
    export default TermsCondition;
  </code></pre>
  <p>DetailPage.js</p>
  <pre><code>function DetailPage({ navigation}) {
      return (
        &lt;View style={{ flexDirection: 'row' }}&gt;
          &lt;Text style={{fontSize:50}}&gt;DetailPage&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  </code></pre>
  <p>export default DetailPage;
  Sorry for this silly question but I tried it online but confused a lot.
  Thank You in advance!</p>