Can't export component in react native-CodePudding

I want to import 2 components into App.js component, but for some odd reason one of the imports causes this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of MyWebComponent. This error is located at: in RCTView (created by View) in View (created by MyWebComponent) in MyWebComponent (created by App)

I've tried importing component both with curly brackets and without them, error stays the same.

This is the code:

MyWebComponent.js

import { useState } from "react";
import WebView from "react-native";
import { ActivityIndicator, View } from "react-native";

const MyWebComponent = (uri) => {
  const [visible, setVisible] = useState(true);

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={uri}
        onl oadStart={() => setVisible(true)}
        onl oadEnd={() => setVisible(false)}
      ></WebView>
      {visible && (
        <ActivityIndicator
          style={{
            backgroundColor: "rgba(52, 52, 52, 0.8)",
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            jusityContent: "space-around",
            flexWrap: "wrap",
            alignContent: "center",
          }}
          size="large"
        ></ActivityIndicator>
      )}
    </View>
  );
};

export default MyWebComponent;

This component is getting imported successfully (FadeInView):

import React, { useRef, useEffect } from "react";
import { Animated } from "react-native";

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim,
      }}
    >
      {props.children}
    </Animated.View>
  );
};

export default FadeInView;

This is how I import: App.js

import FadeInView from "./FadeInView";
import MyWebComponent from "./MyWebComponent";

<...>

{showFirstWeb && <MyWebComponent uri="https://www.google.com/" />}
{showSecondWeb && <MyWebComponent uri="https://www.bbc.com/" />}

CodePudding user response：

You're not importing WebView correctly. You're missing curly braces.

Also WebView from 'react-native' is deprecated.

You should use https://github.com/react-native-webview/react-native-webview insted.