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, props7 <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?