react-native-maps with expo - react-native

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.

Related

React Native Vision Camera using Expo

I have an Expo managed project in which I would like to use the React Native Vision Camera. The Expo Camera does not provide enough functionalities for my app.
After following the Getting Started, I get the following errors when running the app in my web browser:
I have imported the Camera module using
import { Camera } from 'react-native-vision-camera'; and adapted my app.json to include
"plugins": [
[
"react-native-vision-camera",
{
"cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera."
}
]
]
React Native Vision Camera doesn't have web support for now.
https://github.com/mrousavy/react-native-vision-camera/discussions/892

react native maps crashes on Standalone version from Google Play

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>

How to set up environment variables in react native

I'm making a react native app that makes a request to my server hosted on heroku.
Should I be hiding the URL of my server and if so how can I add an environment variable to a react native project?
I have made a .env file and then have done this:
console.log(process.env.URL)
Which is returning undefined - I am also using expo if that makes a difference.
If you use Expo, there is an easy way to create environment variables.
In your app.json file
{
"expo": {
"extra": {
"URL": "https://..."
}
}
}
After that, you will need to install the expo-constant package.
expo install expo-constants
And, to get the info in your app:
import Constants from "expo-constants";
console.log(Constants.manifest.extra.URL);
One library that I like to use that works for bare react native and expo is react-native-dotenv
Install it npm i react-native-dotenv
Add a .env file with your variables
MY_ENV_VARIABLE=SECRET_PASSWORD
Add the babel plugin to .babelrc file.
{
"plugins": [
["module:react-native-dotenv"]
]
}
Import and use it
import { MY_ENV_VARIABLE } from "react-native-dotenv";
function doSomething() {
console.log(MY_ENV_VARIABLE);
}

Require cycles are allowed, but can result in uninitialized values in react-native-maps

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)

How to disable autolinking on iOS?

I've installed react-native-localization in my react native project (v0.6). Library is not supporting autolinker yet so I need to disable it for iOS and Android in react-native.config.js.
I already tried to add dependencies in react-native.config.js. After that, I did react-native link react-native-localization command and build an app.
This is my react-native.config.js file:
'use strict';
const ios = require('#react-native-community/cli-platform-ios');
const android = require('#react-native-community/cli-platform-android');
module.exports = {
dependencies: {
'react-native-localization': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
ios: null,
},
},
},
commands: [...ios.commands, ...android.commands],
platforms: {
ios: {
linkConfig: ios.linkConfig,
projectConfig: ios.projectConfig,
dependencyConfig: ios.dependencyConfig,
},
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
},
/**
* Used when running RNTester (with React Native from source)
*/
reactNativePath: '.',
project: {
ios: {
project: './RNTester/RNTester.xcodeproj',
},
android: {
sourceDir: './RNTester',
},
},
};
Error in simulator says:
"Please check your configuration. Did you run 'react-native link'?
As now, react-native has added the support for CocoaPods inside of his projects. (https://github.com/facebook/react-native/releases)
Sadly, i don't know why, but the autolinking feature never works for me on iOS but always goes trough in Android. The only solution i found is to do a react-native link only for iOS (renaming the android folder to something else), then do cd ios and pod install. After that, in the majority of the cases, it would work out of the box, while other libs needs still to be updated to have a full integration with RN 0.60.
Hope all this will be fixed soon but until that we only have to wait and hope that the libs work without any other complications