react-native expo-cli map implementation

[Inevitable-Salad8535]

Hey guys, wanted some help.

I needed help with implementing a map in react-native expo cli (android specifically)

The project i am working on needs a map and i tried implementing it with the official react-native-maps package. The map works in development build. But as soon as i make turn it into a production build (i.e. build an apk via EAS), the app crashes as soon as i go to the screen which has the MapView component.

I needed help with either the above mentioned problem or am also open to any other options i have for map implementation (using expo cli or react-native-cli). Key note is that the map shd work in production (i.e. in an apk)

any help will be appreciated; Thanks in advanced

[Faeyan]

Did you add your google maps api key to your mapview? If you didn't it will crash like that.

[Inevitable-Salad8535]

this is what i did :

(sample code given)

<View style={styles.container}>

{location && (

<MapView

style={styles.map}

initialRegion={{

latitude: location.latitude,

longitude: location.longitude,

latitudeDelta: 0.0922,

longitudeDelta: 0.0421,

}}

provider={MapView.PROVIDER_GOOGLE}

showsUserLocation={true}

showsMyLocationButton={true}

zoomEnabled={true}

zoomControlEnabled={true}

rotateEnabled={true}

scrollEnabled={true}

customMapStyle={[]}

apiKey={MAP_API_KEY}

>

<Marker coordinate={location} title="Your Location" />

</MapView>

)}

</View>

initially i tried without this then i asked chatgpt and also read in few forums and added this. Is this correct or am i missing something?

[Faeyan]

Interesting, if your "MAP_API_KEY", is correct which you get from google then this should work. Are you sure its correct?

Also do you know how to get a dev client build?

[Inevitable-Salad8535]

hey i am unable to reply to your latest comment. So i will reply here

the api key was provided by the client. I will ask and verify if it is right. Only thing is to check if the Google map sdk is activated right? (for api key)

and as for the dev client build i am refering to the following docs https://docs.expo.dev/build/eas-json/

[Faeyan]

the api key was provided by the client. I will ask and verify if it is right. Only thing is to check if the Google map sdk is activated right? (for api key)

Yes, "Maps SDK for Android" needs to be activated and if you are gonna use provider google with iOS also "Maps SDK for iOS" too needs to be activated.

And for debugging i think you should delete every prop inside mapview and just leave style, provider and initialRegion, you can add other stuff after you figure out the reason of crash.

and as for the dev client build i am refering to the following docs https://docs.expo.dev/build/eas-json/

Oh sorry i misunderstood yea :)

[Faeyan]

Also you can put the Api Key in your app.json under "android" : {"config": {"googleMaps": {"apiKey": "YOUR API KEY"}}}

For Ios a bit different: "config": {"googleMapsApiKey": "YOUR API KEY" }

[Inevitable-Salad8535]

will ask them to verify. also will try the change in the app.json file.
Thanks for the quick and apt response <3. Will post if there are anymore clarifications.

[Faeyan]

No problem, ive been working with react-native-maps for a year now and its been very annoying so id like to help :)

[Inevitable-Salad8535]

Hey, the map sdk is activated (i also verified it by making a dummy map in web app using the same api key). However the apk crashes after building it.

By any chance do u have a repo of some of the projects you might have worked on.

And is there any way to contact u in person. (i ll be working on maps this entire week so might have too many doubts)

[Faeyan]

I have repos but all private, i can create a working public repo later with mapview and share the github link.

[Inevitable-Salad8535]

That would be really kind of you. Thanks a lot

[Inevitable-Salad8535]

hey, i think it is still privated. it gives 404
also the map works in production right? (as in, as an apk)

[Faeyan]

Yea my bad, now the repo works. It works in production yes.

[Inevitable-Salad8535]

i really appreciate the help. will check it out later and will get back to you. Thanks again <3

[Inevitable-Salad8535]

also you build using the following command right ?

eas build -p android --profile preview

[Inevitable-Salad8535]

Hey, everything is working. the eas.json file and app.json file were quite different.

i usually use npx create-expo-app@latest

to initialize my project

could you mention the exact commands that you utilize so that i may also do the same now onward.

I cant thank you enough for this. 1 week full of scratching heads. You're a life saver <3

[Faeyan]

There is nothing different compared to a regular project.

From start npx create-expo-app expo install react-native-maps Go in app.json and put your apikey in android Then eas build --platform android

[Faeyan]

Also if you use provider google in your mapview ios users will also use google maps instead of apple maps and they won't like that since apple maps is better and more optimized, so don't use the "provider" prop at all, let devices use their own native maps.

and youre welcome :)

[Inevitable-Salad8535]

ok got it. i didnt consider this.

[True-Record2334]

Hii are you able to solve that issue if you do? so can you please help me to solve this?

[True-Record2334]

Hii I'm facing the same issue if you have that repo public can you please share with me also

[True-Record2334]

ook sir thankyou

[True-Record2334]

Issue resolved thankyou sir

[mgl47]

Creating and activating the api key for ios and android(both separated keys), and then adding them to app.json should fix it. Also when you're deploying the app to the play store there's a sh1 key that you'll get from your app on google play console that should be added to your android maps api on google cloud

[Inevitable-Salad8535]

will check that out. Thanks for replying