Enable google maps on android (#44)

* Enable google maps on android * Remove unused text import
NoLoSay · Feb 14, 2024 · 390a1af · 390a1af
1 parent 8cb95af
commit 390a1af
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 41 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -69,18 +69,29 @@ def enableProguardInReleaseBuilds = false
  */
 def jscFlavor = 'org.webkit:android-jsc:+'
 
+
 android {
     ndkVersion rootProject.ext.ndkVersion
     buildToolsVersion rootProject.ext.buildToolsVersion
     compileSdk rootProject.ext.compileSdkVersion
 
     namespace "com.nolosay"
+
+    def googleMapsApiKey = ""
+    try {
+        Properties properties = new Properties()
+        properties.load(project.rootProject.file('local.properties').newDataInputStream())
+        googleMapsApiKey = properties.getProperty('GOOGLE_MAPS_API_KEY')
+    } catch (Exception e) {
+        println "Error reading GOOGLE_MAPS_API_KEY from local.properties: " + e.getMessage()
+    }
     defaultConfig {
         applicationId "com.nolosay"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "0.0.1"
+        manifestPlaceholders = [GOOGLE_MAPS_API_KEY: "\"${googleMapsApiKey}\""]
     }
     signingConfigs {
         debug {

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -16,7 +16,10 @@
     </activity>
     <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:exported="true" android:launchMode="singleTask" android:theme="@style/AppTheme" android:windowSoftInputMode="adjustResize" />
     <meta-data
-          android:name="com.google.mlkit.vision.DEPENDENCIES"
-          android:value="barcode" />
+      android:name="com.google.mlkit.vision.DEPENDENCIES"
+      android:value="barcode" />
+    <meta-data
+      android:name="com.google.android.geo.API_KEY"
+      android:value="@GOOGLE_MAPS_API_KEY"/>
   </application>
 </manifest>
diff --git a/src/screens/home/MapView/MapView.tsx b/src/screens/home/MapView/MapView.tsx
@@ -8,8 +8,8 @@
  */
 
 import React from 'react'
-import { StyleSheet, View, Text } from 'react-native'
-import MapView, { Marker } from 'react-native-maps'
+import { StyleSheet, View, Platform } from 'react-native'
+import MapView, { Marker, PROVIDER_DEFAULT, PROVIDER_GOOGLE } from 'react-native-maps'
 import colors from '@global/colors'
 import images from '@global/images'
 import { Place } from '@global/types/Places'
@@ -27,36 +27,34 @@ interface Props {
  * @returns {JSX.Element}
  */
 export default function PlacesMapView({ places, navigation }: Props): JSX.Element {
-  const { account, onMarkerPress, mapRef, isMapAvailable } = useMapViewController({ navigation })
+  const { account, onMarkerPress, mapRef } = useMapViewController({ navigation })
 
   return (
     <View style={styles.container}>
-      {isMapAvailable() && (
-        <MapView
-          ref={mapRef}
-          initialRegion={{
-            latitude: account.localisation?.coords.latitude ?? 0.0,
-            longitude: account.localisation?.coords.longitude ?? 0.0,
-            latitudeDelta: 0.02,
-            longitudeDelta: 0.02,
-          }}
-          style={styles.map}
-          showsUserLocation
-          loadingEnabled
-          loadingIndicatorColor={colors.accent}
-          loadingBackgroundColor={colors.lightGrey}
-        >
-          {places.map(marker => (
-            <Marker
-              key={marker.id}
-              coordinate={marker.coordinates}
-              image={images.icons.maps.pin()}
-              onPress={() => onMarkerPress(marker)}
-            />
-          ))}
-        </MapView>
-      )}
-      {!isMapAvailable() && <Text style={styles.errorText}>Pas encore fonctionnel</Text>}
+      <MapView
+        ref={mapRef}
+        initialRegion={{
+          latitude: account.localisation?.coords.latitude ?? 0.0,
+          longitude: account.localisation?.coords.longitude ?? 0.0,
+          latitudeDelta: 0.02,
+          longitudeDelta: 0.02,
+        }}
+        style={styles.map}
+        showsUserLocation
+        loadingEnabled
+        loadingIndicatorColor={colors.accent}
+        loadingBackgroundColor={colors.lightGrey}
+        provider={Platform.OS === 'android' ? PROVIDER_GOOGLE : PROVIDER_DEFAULT}
+      >
+        {places.map(marker => (
+          <Marker
+            key={marker.id}
+            coordinate={marker.coordinates}
+            image={images.icons.maps.pin()}
+            onPress={() => onMarkerPress(marker)}
+          />
+        ))}
+      </MapView>
     </View>
   )
 }

diff --git a/src/screens/home/MapView/useMapViewController.tsx b/src/screens/home/MapView/useMapViewController.tsx
@@ -6,7 +6,7 @@
  * @requires MapView react-native-maps
  */
 import { Ref, useContext, useRef } from 'react'
-import { Alert, Platform } from 'react-native'
+import { Alert } from 'react-native'
 import MapView from 'react-native-maps'
 import { AccountContext } from '@global/contexts/AccountProvider'
 import { AccountType } from '@global/types/Account'
@@ -16,7 +16,6 @@ interface MapViewController {
   account: AccountType
   mapRef: Ref<MapView>
   onMarkerPress: (place: Place) => void
-  isMapAvailable: () => boolean
 }
 
 interface Props {
@@ -71,17 +70,9 @@ export default function useMapViewController({ navigation }: Props): MapViewCont
     ])
   }
 
-  /**
-   * @function isMapAvailable
-   * @description Checks if the map is available on the current platform.
-   * @returns {boolean}
-   */
-  const isMapAvailable = (): boolean => Platform.OS === 'ios' || Platform.OS === 'macos'
-
   return {
     account,
     mapRef,
     onMarkerPress,
-    isMapAvailable,
   }
 }