Код не запускается при импорте пакета навигации или других экранов

Question

Когда я использую import {createStackNavigator} from 'react-navigation'; или импортирую любой экран или страницу js, например:

 import Karate from './screens/Karate';

, в приложении App.js мое приложение не работает, и появляется красный экран с ошибками

Сервер разработки вернул код ошибки ответа: 500

При удалении строки импорта для навигации приложение работало нормально

Сервер разработки вернул код ошибки ответа: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false&revisionId=bc456ed317c1e4fb

Код App.js:

/**
 * @format
 */
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image,TouchableOpacity} from 'react-native';
// import {createStackNavigator} from 'react-navigation';
//  import Karate from './screens/Karate';
//  import Takewando from './screens/Takewando';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

  render() {


    return (

      <View>


                        <View style={{alignItems: 'center',justifyContent: 'center' }}>

                        <Image
                               style={{width: 200, height: 200}}
                          source={require('./fimg/takewando.png')}/>

                       </View>

                       <View style={btnstyles.takebtn}>
                       <TouchableOpacity>

                                                    <Text style = {btnstyles.takbtntext}>Takewando</Text>

                                 </TouchableOpacity>
                      </View>

                      <View style={{alignItems: 'center',justifyContent: 'center'} }>
                      <Image
                             style={{width: 200, height: 200,bottom:-50 }}
                        source={require('./fimg/karate.png')}/>


                      </View>


                      <View style={btnstyles.karbtn}>
                                 <TouchableOpacity>
                                                    <Text style = {btnstyles.takbtntext}>Karate</Text>
                                 </TouchableOpacity>
                      </View>

            </View>

    );
  }
}
const btnstyles=StyleSheet.create({
  takebtn:{
   //backgroundColor: 'red',

   backgroundColor: '#DDDDDD',
  // marignRight:5,
   //marignLeft:5,
   borderColor:'#FE434C',
   borderWidth:2,
   borderRadius:7,
   alignItems:'stretch',
  //position: 'absolute',

  bottom:-30,
  padding: 5,
  //width:150,
  //paddingHorizontal: 30,
  //paddingVertical: 5,
},
karbtn:{
  //backgroundColor: 'red',
  backgroundColor: '#DDDDDD',
 // marignRight:5,
  //marignLeft:5,
  borderColor:'#007aff',
  borderWidth:2,
  borderRadius:7,
  alignItems:'stretch',
  bottom:-100,
  padding: 5
},
takbtntext:{
  alignSelf: 'center',
   color: 'black',
   fontSize:20,
   fontWeight:'bold',
   textAlign:'center'
}

});