SDK Version:40.0.0
Platforms(Android/iOS/web/all):Android
Hello
I use react-native-maps in my project. My project was developed using Expo SDK 37 and it was working fine. I tried recently to run the “expo-upgrade” command to upgrade to Expo SDK 40. I fixed some errors that I found in development mode and then I executed the command: “expo build: android”, selected to generate Bundle instead of APK, and then I got my bundle file. I uploaded that bundle file to Google Play Console in Internal Test release mode. When I downloaded the Internal Test version from Google Play and went to the Map page, the app crashes and reload immediately and I’m being able to see the map Screen.
Video showing the problem: https://youtu.be/MqfYoOZcmio
Ps: It was working fine with Expo SDK 37 before upgrading to Expo SDK 40
My app.json:
…
"android": {
"package": "package.name",
"versionCode": 123,
"config":{
"googleMaps":{
"apiKey":"MY_KEY"
}
}
},
"packagerOpts": {
"config": "metro.config.js",
"sourceExts": ["js", "jsx", "svg"]
}
I tried even to create a new project on Google API Manager and a new key, pass the package name of the project and activate Google Maps SDK for android but it did not work. I passed Google's sign-in SHA-1 key from Google Play to the project and it did not solve the problem.
I tried to eject from expo and then i made a native configuration for my project and then it worked fine just as before
I had the same issue after upgrading to SDK 40,
In my case the problem was in custom Marker.
Also in another project on SDK 40 I didn't have this issue, but I was loading custom marker from uri like this icon={{uri: some_url}}
WRONG
<MapView.Marker
title="Your Title"
description="Your Description"
icon={require('../Images/mapPin.png')} <== PROBLEM
draggable
coordinate={{
latitude: coords.latitude,
longitude: coords.longitude,
}}
/>
RIGHT
<MapView.Marker
title="Your Title"
description="Your Description"
draggable
coordinate={{
latitude: coords.latitude,
longitude: coords.longitude,
}}
>
<Image source={require('../Images/mapPin.png')} style={{width:50, height:50}} />
</MapView.Marker>
Related
Could not implement bing map in react native expo
<BingMapsView
credentialsKey="somekey"
mapLocation={{ lat:
12.9010875, long: 77.6095084,
zoom: 15 }}
style={styles.box}
/>
</View>
Looks like it is a problem with Android configuration. As you can see here https://reactnative.dev/docs/native-components-android requireNativeComponent is used to define the native view on the JS side. Probably you need to clean your node modules and install them again and rebuild your project
to show map I use react-native-maps. I did all config but when run my project get the following message in the console:
Require cycles are allowed, but can result in uninitialized values.
Consider refactoring to remove the need for a cycle.
Require cycle:
node_modules\react-native-maps\lib\components\MapView.js ->
node_modules\react-native-maps\lib\components\Geojson.js ->
node_modules\react-native-maps\lib\components\MapView.js
I think this message causes a problem and does not allow the app to show the map.
How can I solve this?
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
const App = () => {
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
</MapView>
</View>
)
}
I resolved this issue using an answer in this Github issue by itsam, with my more detailed instructions in the brackets, assuming you are at your root directory where package.json is:
install patch-package (npm i -D patch-package or yarn add -D patch-package).
create a folder in your project called "patches" (mkdir patches)
Inside "patches" folder get the patch from this gist (for convenience) https://gist.github.com/itsam/278a56a1f20a8b80e27c269d9fe83093
and name it as react-native-maps+0.27.1.patch (copy and paste the contents of the patch file in the gist URL to patches/react-native-maps+0.27.1.patch)
In package.json, include "postinstall": "patch-package" under script(The writer forgot to include this important step)
yarn install or npm install (it may throw a warning saying that the versions are mismatched, but it works for me)
In React Native I found two plugins to check if a device (iOS/Android) is jailbroken/rooted:
Jail Monkey
react-native-is-device-rooted
I have firstly tried the npm package react-native-is-device-rooted but it doesn't work and it seems to be outdated. So I tried Jail Monkey, but I get this following error:
The code is:
import JailMonkey from 'jail-monkey'
export default class Welcome extends Component {
render() {
return (
...
<View style={styles.lowerView}>
<CustomButton text={"Jail Monkey"} onPress={() => this.printJailMonkey()}/>
</View>
...
);
}
printJailMonkey = () => {
console.log("Jail Monkey library content: " + JailMonkey.isJailBroken())
}
}
I have checked carefully the manual link of the package (using Xcode, pod install, and so on...). Nothing worked, does someone can help me?
JailMonkey uses Native Modules and thus cannot run in an Expo managed app. You need to eject it to ExpoKit for JailMonkey to work.
Solved but doing manually the linking.
Try following steps for manual linking.
Navigate to root folder in terminal enter commands:
react-native link
cd ios
pod update
So im trying to make native-maps work within an expo app and the documentation page says that "No setup required for use within the Expo app"
https://docs.expo.io/versions/latest/sdk/map-view/?redirected
But after installing the library with expo its not working.
I have 2 basic questions about why its not working:
Where do you put the API key from Google console?
How do you enable the Google Maps to work with the expo app on the console, enable the android sdk?
Usage
You can just import the MapView from expo as react-native-maps is included in expo. (There aren't any integration or linking steps if you use expo and haven't ejected your app. I guess the documentation is not very clear about this...)
Just import from expo like this:
import { MapView } from 'expo'
and than use it as usual and described in the documentation of react-native-maps:
<MapView
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
Integration of the Api key
The api keys from the google play console belongs into the android and ios section of your app.json if you use expo.
add this to your app.json > android.config:
"googleMaps": { "apiKey": "<android maps api key>" }
and this to your app.json > ios.config:
"googleMapsApiKey": "<ios maps api key>"
Your app.json should contain something like this in the end (and all of the other stuff which is usually in there):
{
"expo": {
"android": {
"package": "com.company",
"config": {
"googleMaps": {
"apiKey": "<android maps key>"
}
}
},
"ios": {
"bundleIdentifier": "com.company",
"config": {
"googleMapsApiKey": "<ios maps api key>"
}
}
}
}
Summer 2020 Update:
The expo package no longer supports its own built-in MapView component.
So, rather than importing MapView from expo (as #Leo mentioned) like so:
import { MapView } from 'expo';
You should directly install the react-native-maps module to import the MapView component from there, like so:
import MapView from 'react-native-maps';
You can download react-native-maps either by using the expo-cli command mentioned in the error message shown here or a package manager of your choice, like npm or yarn.
I'm new to react native and want to build a small test app in Android and iOS.
I have created an images directory alongside my index.ios.js and index.android.js files.
My code below produces a red screen error saying "unable to resolve module ./images/tree.png... Invalid directory...":
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
} = React;
var TestApp = React.createClass({
render: function() {
return (
<View>
<Text>test app</Text>
<Image
style={styles.thumbnail}
source={require('./images/tree.png')} /> />
</View>
);
},
});
var styles = StyleSheet.create({
thumbnail: {
width: 100,
height: 100,
},
});
AppRegistry.registerComponent('TestApp', () => TestApp);
Where should I place my images and how should I reference them?
Your code looks correct assuming that the images directory is in the same location as the index.*.js files.
What version of React Native do you have? From the Images doc page:
Available React Native 0.14+. If you've generated your project with
0.13 or earlier, read this. The new asset system relies on build hooks for Xcode and Gradle that are included in new projects generated with
react-native init. If you generated your projects before that, you'll
have to manually add them to your projects to use the new images asset
system. See Upgrading for instructions on how to do this.
If you want to verify your react-native version, the easy way to do this is to run the following npm command from your project directory:
npm ls react-native
The current release version is 0.15.0.
Make sure you don't forget to run react-native upgrade after updating the package as this is required for adding build hooks for the new asset system to existing projects. If you previously updated your react-native version without doing this, that may explain the issue you are having.
If you happen to be using Windows for development, see my answer to this question for details on how to work around a bug with the new asset system on Windows.