react-native-webview Typescript error: 'WebView' cannot be used as a JSX component-CodePudding

I am trying to set up a simple React Native app using Expo with TypeScript that shows a WebView. My App.tsx file contains the following:

import Constants from 'expo-constants';
import { StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
    return (
        <WebView
            style={styles.container}
            source={{ uri: 'https://example.com/' }}
        />
    );
}

const styles = StyleSheet.create({
    container: {
        marginTop: Constants.statusBarHeight,
    },
});

This code works correctly, but the TypeScript compiler throws an error at the WebView component.

App.tsx:7:4 - error TS2786: 'WebView' cannot be used as a JSX component.
  Its instance type 'WebView<{ style: { marginTop: number; }; source: { uri: string; }; }>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("C:/example/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
          Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props

7   <WebView
     ~~~~~~~


Found 1 error.

I am using the following versions of my dependencies:

{
    "dependencies": {
        "expo": "~44.0.0",
        "expo-status-bar": "~1.2.0",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-native": "0.64.3",
        "react-native-web": "0.17.1",
        "react-native-webview": "11.15.0"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@types/react": "~17.0.21",
        "@types/react-native": "~0.64.12",
        "typescript": "~4.3.5"
    }
}

How can I correct this error?

CodePudding user response：

Some libraries don't support typescript. In this case you can use the comment // @ts-ignore in front of the error to let TS ignore it.

CodePudding user response：

You can try like that:

const App: FC = () => {
 return (
     <WebView
         style={styles.container}
         source={{ uri: 'https://example.com/' }}
     />
 );
}

export default App;