错误：元素类型无效：应为字符串或类/函数，但未定义。 反应本机

Question

I know this is a common error but I couldn't find an answer that was relevant for my situation.

I have two files nested together in a folder; one is a parent functional component, one is a child functional component.

The parent file is importing and structured like this

.....
import NavigationIcon from "./NavigationIcon";

const NavigationIcons = () => {
  return (
    <IconContext.Consumer>
      {(icons) => (
        <View>
          {icons.map((icon) => (
       js:12     <NavigationIcon key={icon.id} icon={icon} />
          ))}
        </View>
      )}
    </IconContext.Consumer>
  );
};

export default NavigationIcons;

The children file is structured like this

import React from "react";
import { Pressable, Icon } from "react-native";

function NavigationIcon(props) {
  return (
   js:6 <Pressable onPress={() => console.log("pressed icon ")}>
      <Icon name={props.icon.name} type={props.icon.type} />
    </Pressable>
  );
}

export default NavigationIcon;

Here's the error message:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at NavigationIcon.js:6., 
    in NavigationIcon (at NavigationIcons.js:12)

edit: I did try importing NavigationIcon as import {NavigationIcon} from "..."

Answer 1

I figured it out. I'm using expo for my app development and it uses 0.62. I was trying to utilize the new component Pressable which came out in 0.63