Получение ошибки React.createElement: недопустимый тип

Question

Предупреждение об ОШИБКЕ: React.createElement: тип недействителен - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или могли перепутать импорт по умолчанию и именованный импорт.

Приложение. js Файл ->

import React, { Component } from 'react';

import AppRouter from './src/navigation/Nav';

export default class App extends Component {
    render() {
        return <AppRouter />;
    }
}

SearchScreen. js Файл ->

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SearchBar from '../components/SearchBar';

const SearchScreen = () => {
  const [term, setTerm] = useState('');

  return (
    <View>
      <SearchBar
        term={term}
        onTermChange={newTerm => setTerm(newTerm)}
        onTermSubmit={() => console.log('term was submitted')}
      />
      <Text>Search Screen</Text>
      <Text>{term}</Text>
    </View>
  );
};

const styles = StyleSheet.create({});

export default SearchScreen;

Nav. js Файл ->

 import { createAppContainer } from 'react-navigation';
    import { createStackNavigator } from 'react-navigation-stack';
    
    import SearchScreen from '../screens/SearchScreen';
    
    const navigator = createStackNavigator(
      {
        Search: SearchScreen,
      },
      {
        initialRouteName: 'Search',
        defaultNavigationOptions: {
          title: 'Business Search',
        },
      }
    );
    
    export default createAppContainer(navigator);

Вот панель поиска. js Файл ->

import React from 'react';
    import { View, TextInput, StyleSheet } from 'react-native';
    import {Feather}  from 'react-native-vector-icons';
    
    const SearchBar = ({ term, onTermChange, onTermSubmit }) => {
      return (
        <View style={styles.backgroundStyle}>
          <Feather name="search" style={styles.iconStyle} />
          <TextInput
            autoCapitalize="none"
            autoCorrect={false}
            style={styles.inputStyle}
            placeholder="Search"
            value={term}
            onChangeText={onTermChange}
            onEndEditing={onTermSubmit}
          />
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      backgroundStyle: {
        marginTop: 10,
        backgroundColor: '#F0EEEE',
        height: 50,
        borderRadius: 5,
        marginHorizontal: 15,
        flexDirection: 'row'
      },
      inputStyle: {
        flex: 1,
        fontSize: 18
      },
      iconStyle: {
        fontSize: 35,
        alignSelf: 'center',
        marginHorizontal: 15
      }
    });
    
    export default SearchBar;