HMS-Core / hms-react-native-plugin

This repo contains all of React-Native HMS plugins.
https://developer.huawei.com/consumer/en/doc/overview/HMS-Core-Plugin?ha_source=hms1
Apache License 2.0
245 stars 68 forks source link

Problem with import of react-native-hms-map in react-native #37

Closed stillii93 closed 3 years ago

stillii93 commented 3 years ago

failing import of library in component. Fails to link index.js file.

Example: import HMSMapView, {MapTypes, Marker} from '@hmscore/react-native-hms-map';

Solution: we solved this by: 1) moved out of the src index.js. 2) we modified the package.json file of library:

utarit commented 3 years ago

Hi, I have just created new project via react-native-cli and install the library via npm to get your error. After configuring I successfully imported map without any errors.

Could you give me the information below so I can look into what causes the problem.

Make sure you import and render correctly. Example:

import MapView from '@hmscore/react-native-hms-map';

<MapView
  camera={{target: {latitude: 50, longitude: 50}}}
  style={{height: 400}} />
stillii93 commented 3 years ago

Hi,


1) the error:

at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:71) at java.lang.reflect.Method.invoke(Native Method) at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:371) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150) at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:900) at android.os.Handler.dispatchMessage(Handler.java:103) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26) at android.os.Looper.loop(Looper.java:219) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225) at java.lang.Thread.run(Thread.java:929)


2) Node Version: i have v14.13.0 but we try on another pc with v12.18.4. It doesn't function on both.


3) package.json:

{ "name": "App", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "postinstall": "npx jetify" }, "dependencies": { "@hmscore/react-native-hms-analytics": "^5.0.3-300", "@hmscore/react-native-hms-map": "^5.0.1-300-01", "@hmscore/react-native-hms-push": "^5.0.2-301", "@ptomasroos/react-native-multi-slider": "^1.0.0", "@react-native-community/async-storage": "^1.6.2", "@react-native-community/clipboard": "^1.2.3", "@react-native-community/viewpager": "^2.0.1", "axios": "^0.19.0", "crypto-js": "^3.1.9-1", "immutability-helper": "^3.0.1", "jail-monkey": "^2.3.1", "moment": "^2.24.0", "react": "16.13.1", "react-native": "0.63.3", "react-native-action-button": "^2.8.5", "react-native-android-open-settings": "^1.3.0", "react-native-autoheight-webview": "^1.2.4", "react-native-background-timer": "^2.3.1", "react-native-build-config": "^0.3.2", "react-native-camera": "3.11.1", "react-native-circular-progress": "^1.3.4", "react-native-collapsible": "^1.5.1", "react-native-device-info": "^5.2.1", "react-native-elements": "^1.2.7", "react-native-env-props": "^1.1.5", "react-native-fingerprint-scanner": "^3.0.2", "react-native-firebase": "5.5.6", "react-native-fix-image": "^2.0.1", "react-native-geolocation-service": "^3.1.0", "react-native-gesture-handler": "^1.5.0", "react-native-google-places-autocomplete": "^1.3.9", "react-native-icon-badge": "^1.1.3", "react-native-keychain": "^4.0.1", "react-native-maps": "0.26.1", "react-native-modal": "^11.5.1", "react-native-modalbox": "^2.0.0", "react-native-month-year-picker": "1.3.5", "react-native-parallax-scroll-view": "^0.21.3", "react-native-pdf-view": "git+https://github.com/cnjon/react-native-pdf-view.git#7f54227493d146eee0869c32627e1b7f801e7283", "react-native-reanimated": "^1.4.0", "react-native-safari-view": "^2.1.0", "react-native-screens": "^1.0.0-alpha.23", "react-native-segmented-control-tab": "^3.4.1", "react-native-share": "4.0.2", "react-native-simple-gesture": "^0.0.2", "react-native-status-bar-height": "^2.4.0", "react-native-svg": "^9.13.3", "react-native-svg-uri": "^1.2.3", "react-native-textinput-effects": "^0.5.1", "react-native-triangle": "^0.0.9", "react-native-user-inactivity": "^1.1.0", "react-native-vector-icons": "6.6.0", "react-native-webview": "7.5.1", "react-navigation": "^4.0.10", "react-navigation-drawer": "^2.3.3", "react-navigation-stack": "^1.10.3", "react-redux": "^7.1.1", "redux": "^4.0.4", "redux-thunk": "^2.3.0", "reselect": "^4.0.0", "rn-fetch-blob": "^0.12.0", "serialize-javascript": "^2.1.0", "styled-components": "^4.4.1", "url-parse": "^1.4.7" }, "devDependencies": { "@babel/core": "^7.8.4", "@babel/runtime": "^7.8.4", "@react-native-community/eslint-config": "^1.1.0", "babel-jest": "^25.1.0", "eslint": "^6.6.0", "jest": "^25.1.0", "jetifier": "^1.6.4", "metro-react-native-babel-preset": "^0.59.0", "react-test-renderer": "16.13.1", "remote-redux-devtools": "^0.5.16" }, "jest": { "preset": "react-native" } }


4) we use react-native-cli

Example:

we use i this way...

Example:

import MapView from '@hmscore/react-native-hms-map';

<MapView camera={{target: {latitude: 50, longitude: 50}}} style={{height: 400}} />

utarit commented 3 years ago

Hi, I cannot understand the error from the text, could you send the screenshot of the error when index.js is in src folder and it's set main: "src/index.js" in plugin's package.json.

Also can you check out for the new version of the plugin. https://www.npmjs.com/package/@hmscore/react-native-hms-map/v/5.0.3-302