I'm devolopping an app using React Native and Expo. And I want to integrate react-native-webview-leaflet. But when I want to use the tag WebViewLeaflet
so that I can be able to use WMS with GeoServer, it underlines the tag then shows this error when I hover the cursor.
JSX element type 'WebViewLeaflet' does not have any construct or call signatures.ts(2604)
Peek Problem No quick fixes available.
And when I try to run I get this errors
Some times this one
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in The fact, I have followed the step of installation but nothing work fine for me.
and other time this one
WebView has been removed from React Native. It can now be installed and imported from 'react-native-webview' instead of 'react-native'. See https://github.com/react-native-community/react-native-webview
Here is my code
import React, {Component} from 'react';
import WebViewLeaflet from 'react-native-webview-leaflet';
import { View } from 'react-native';
export default class Map extends Component{
render(){
return (
<View>
<WebViewLeaflet/>
</View>
)
}
}
Package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.6",
"expo": "~36.0.0",
"expo-asset": "^8.0.0",
"expo-file-system": "^8.0.0",
"expo-font": "^8.0.0",
"leaflet": "^1.3.4",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-dynamic-vector-icons": "^0.2.1",
"react-native-gesture-handler": "^1.5.3",
"react-native-maps": "^0.26.1",
"react-native-paper": "^2.2.2",
"react-native-reanimated": "^1.5.0",
"react-native-safe-area-context": "^0.6.2",
"react-native-screens": "^2.0.0-alpha.12",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"react-native-webview-leaflet": "^4.3.4",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-material-bottom-tabs": "^2.1.5",
"react-navigation-stack": "^2.0.15",
"react-navigation-tabs": "^2.7.0"
},
"devDependencies": {
"@types/react": "~16.9.0",
"@types/react-native": "~0.60.23",
"@babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0",
"typescript": "~3.6.3"
},
"private": true
}