Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

How to use react-native-webview-leaflet?

$
0
0

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
}

Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>