I'm making simple google api app by TypeScript via expo.Here is my script.It may shows simple map view.
import React, { useEffect, useState } from "react";import GoogleMapReact from "google-map-react";import { View} from 'react-native';interface MapProps { center: { lat: number; lng: number; }; zoom: number;}const initialMapProps: MapProps = { center: { lat: 35.39, lng: 139.44, }, zoom: 18,};const API_KEY = "MyGoogleApiToken";export default function Apps() { const [mapProps, setMapProps] = useState<MapProps>(initialMapProps); return (<View style={{ width: "100vw", height: "100vh" }}><GoogleMapReact bootstrapURLKeys={{ key: API_KEY }} center={mapProps.center} zoom={mapProps.zoom} /></View> );};But I received error below:
Invariant Violation: View config getter callback for component `div` must be a function (received `undefined`). Make sure to start component names with a capital letter.This error is located at: in div (created by t) in t (created by t) in div (created by t) in t (created by Apps) in RCTView (created by View) in View (created by Apps) in Apps (created by ExpoRoot) in ExpoRoot in RCTView (created by View) in View (created by AppContainer) in DevAppContainer (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in main(RootComponent)I tried
- update react 17 to 18
- uninstall and install again node
- uninstall and install expo-cli
- use javascript instead of typescript
- add resolutions, overwrites columns to package.json
None of them worked.If I only put Texts, It works.So It definitely Google API doesn't work.But I can't understand what's wrong.Anybody have any ideas?
Current package.json is as follows.
{"name": "test-app","version": "1.0.0","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": {"expo": "~45.0.0","expo-status-bar": "~1.3.0","google-map-react": "^2.1.10","react": "17.0.2","react-dom": "17.0.2","react-native": "0.68.2","react-native-web": "0.17.7","react-native-webview": "11.18.1","uuid": "^8.3.2" },"devDependencies": {"@babel/core": "^7.12.9","@types/google-map-react": "^2.1.7","@types/react": "~17.0.21","@types/react-native": "~0.66.13","typescript": "~4.3.5" },"resolutions": {"react": "17.0.2","react-dom": "17.0.2","@types/react": "^17.0.38","@types/react-native": "~0.66.13" },"overwrites": {"react": "17.0.2","react-dom": "17.0.2","@types/react": "^17.0.38","@types/react-native": "~0.66.13" },"private": true}