I want to navigate from App.js to Q1.s and run it via android emulator

App.js

import React, { Component } from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

function App(props) {
return (


<View style={styles.container}>
  <Text style={styles.loremIpsum}>
    Feedback Survey After Medical Check Up
  </Text>
  <TouchableOpacity
    onPress={() => props.navigation.navigate("Q1")}
    style={styles.button}
  >
    <Text style={styles.takeSurvey}>Take Survey</Text>
  </TouchableOpacity>
</View> );}

Q1.js

import React, { Component } from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import EntypoIcon from "react-native-vector-icons/Entypo";
import IoniconsIcon from "react-native-vector-icons/Ionicons";
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

The error is undefined is not an object(evaluating 'props.navigation.navigate').And also i already installed package "react-navigation" and "react-navigation-stack" but it can't detect the import that package in the file.Why?