I am trying to use WebView in the react native boilerplate (template: typescript).I am using WebView
from react-native-webview
library.
/** * Sample React Native App * https://github.com/facebook/react-native * * Generated with the TypeScript template * https://github.com/react-native-community/react-native-template-typescript * * @format */import React from 'react';import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View,} from 'react-native';import { WebView } from 'react-native-webview';import { Colors, DebugInstructions, Header, LearnMoreLinks, ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';const App = () => { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; return (<SafeAreaView style={backgroundStyle}><StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} /><ScrollView contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}><Header /><View style={{ backgroundColor: isDarkMode ? Colors.black : Colors.white, }}><WebView source={{ uri: 'https://www.google.com/', }} /></View></ScrollView></SafeAreaView> );};const styles = StyleSheet.create({ sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', }, highlight: { fontWeight: '700', },});export default App;
But it is showing
(alias) class WebView<P = {}>import WebViewJSX element class does not support attributes because it does not have a 'props' property.ts(2607)'WebView' cannot be used as a JSX component. Its instance type 'WebView<{}>' is not a valid JSX element. Type 'WebView<{}>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.ts(2786)
How can I workaround this ?