Skip to content

Commit 4e016b1

Browse files
ahmedAlaaInstabugahmedAlaaInstabug
authored
feat(example): add google maps screen (#1148)
* feat(example): add google maps screen * fix: Pod issue * feat: read api key from env file
1 parent da01774 commit 4e016b1

File tree

12 files changed

+137
-3
lines changed

12 files changed

+137
-3
lines changed

‎examples/default/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
GOOGLE_MAPS_API_KEY = API_KEY

‎examples/default/android/app/build.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
apply plugin: "com.android.application"
22
apply plugin: "com.facebook.react"
3+
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
34

45
import com.android.build.OutputFile
56

‎examples/default/android/app/src/main/AndroidManifest.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,8 @@
2222
<category android:name="android.intent.category.LAUNCHER" />
2323
</intent-filter>
2424
</activity>
25+
<meta-data
26+
android:name="com.google.android.geo.API_KEY"
27+
android:value="@string/GOOGLE_MAPS_API_KEY" />
2528
</application>
2629
</manifest>

‎examples/default/android/app/src/main/res/values/strings.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
<resources>
22
<string name="app_name">Instabug - React Native</string>
3+
34
</resources>

‎examples/default/ios/InstabugExample/AppDelegate.mm‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
#import "AppDelegate.h"
2+
#import <GoogleMaps/GoogleMaps.h>
23

34
#import <React/RCTBundleURLProvider.h>
5+
#import "RNCConfig.h"
46

57
@implementation AppDelegate
68

@@ -10,6 +12,9 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
1012
// You can add your custom initial props in the dictionary below.
1113
// They will be passed down to the ViewController used by React Native.
1214
self.initialProps = @{};
15+
NSString *googleApiKey = [RNCConfig envFor:@"GOOGLE_MAPS_API_KEY"];
16+
17+
[GMSServices provideAPIKey:googleApiKey]; // use the api key obtained from Google Console
1318

1419
return [super application:application didFinishLaunchingWithOptions:launchOptions];
1520
}

‎examples/default/ios/Podfile‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
require_relative '../node_modules/react-native/scripts/react_native_pods'
2+
23
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
34

4-
platform :ios, min_ios_version_supported
5+
platform :ios, '13.4'
56
prepare_react_native_project!
67

78
# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
@@ -23,7 +24,8 @@ end
2324

2425
target 'InstabugExample' do
2526
config = use_native_modules!
26-
27+
rn_maps_path = '../node_modules/react-native-maps'
28+
pod 'react-native-google-maps', :path => rn_maps_path
2729
# Flags change depending on the env values.
2830
flags = get_default_flags()
2931

‎examples/default/ios/Podfile.lock‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,30 @@ PODS:
7070
- FlipperKit/FlipperKitNetworkPlugin
7171
- fmt (6.2.1)
7272
- glog (0.3.5)
73+
- Google-Maps-iOS-Utils (4.2.2):
74+
- Google-Maps-iOS-Utils/Clustering (= 4.2.2)
75+
- Google-Maps-iOS-Utils/Geometry (= 4.2.2)
76+
- Google-Maps-iOS-Utils/GeometryUtils (= 4.2.2)
77+
- Google-Maps-iOS-Utils/Heatmap (= 4.2.2)
78+
- Google-Maps-iOS-Utils/QuadTree (= 4.2.2)
79+
- GoogleMaps (~> 7.3)
80+
- Google-Maps-iOS-Utils/Clustering (4.2.2):
81+
- Google-Maps-iOS-Utils/QuadTree
82+
- GoogleMaps (~> 7.3)
83+
- Google-Maps-iOS-Utils/Geometry (4.2.2):
84+
- GoogleMaps (~> 7.3)
85+
- Google-Maps-iOS-Utils/GeometryUtils (4.2.2):
86+
- GoogleMaps (~> 7.3)
87+
- Google-Maps-iOS-Utils/Heatmap (4.2.2):
88+
- Google-Maps-iOS-Utils/QuadTree
89+
- GoogleMaps (~> 7.3)
90+
- Google-Maps-iOS-Utils/QuadTree (4.2.2):
91+
- GoogleMaps (~> 7.3)
92+
- GoogleMaps (7.4.0):
93+
- GoogleMaps/Maps (= 7.4.0)
94+
- GoogleMaps/Base (7.4.0)
95+
- GoogleMaps/Maps (7.4.0):
96+
- GoogleMaps/Base
7397
- hermes-engine (0.72.3):
7498
- hermes-engine/Pre-built (= 0.72.3)
7599
- hermes-engine/Pre-built (0.72.3)
@@ -380,6 +404,16 @@ PODS:
380404
- React-jsinspector (0.72.3)
381405
- React-logger (0.72.3):
382406
- glog
407+
- react-native-config (1.5.1):
408+
- react-native-config/App (= 1.5.1)
409+
- react-native-config/App (1.5.1):
410+
- React-Core
411+
- react-native-google-maps (1.10.3):
412+
- Google-Maps-iOS-Utils (= 4.2.2)
413+
- GoogleMaps (= 7.4.0)
414+
- React-Core
415+
- react-native-maps (1.10.3):
416+
- React-Core
383417
- react-native-safe-area-context (4.7.1):
384418
- React-Core
385419
- react-native-slider (4.4.3):
@@ -589,6 +623,9 @@ DEPENDENCIES:
589623
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
590624
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
591625
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
626+
- react-native-config (from `../node_modules/react-native-config`)
627+
- react-native-google-maps (from `../node_modules/react-native-maps`)
628+
- react-native-maps (from `../node_modules/react-native-maps`)
592629
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
593630
- "react-native-slider (from `../node_modules/@react-native-community/slider`)"
594631
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -628,6 +665,8 @@ SPEC REPOS:
628665
- Flipper-PeerTalk
629666
- FlipperKit
630667
- fmt
668+
- Google-Maps-iOS-Utils
669+
- GoogleMaps
631670
- Instabug
632671
- libevent
633672
- OCMock
@@ -681,6 +720,12 @@ EXTERNAL SOURCES:
681720
:path: "../node_modules/react-native/ReactCommon/jsinspector"
682721
React-logger:
683722
:path: "../node_modules/react-native/ReactCommon/logger"
723+
react-native-config:
724+
:path: "../node_modules/react-native-config"
725+
react-native-google-maps:
726+
:path: "../node_modules/react-native-maps"
727+
react-native-maps:
728+
:path: "../node_modules/react-native-maps"
684729
react-native-safe-area-context:
685730
:path: "../node_modules/react-native-safe-area-context"
686731
react-native-slider:
@@ -750,6 +795,8 @@ SPEC CHECKSUMS:
750795
FlipperKit: 2efad7007d6745a3f95e4034d547be637f89d3f6
751796
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
752797
glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
798+
Google-Maps-iOS-Utils: f77eab4c4326d7e6a277f8e23a0232402731913a
799+
GoogleMaps: 032f676450ba0779bd8ce16840690915f84e57ac
753800
hermes-engine: 10fbd3f62405c41ea07e71973ea61e1878d07322
754801
Instabug: 59f0b0bc2c062b5cdbbf417cca365480a1fe55d8
755802
instabug-reactnative-ndk: 960119a69380cf4cbe47ccd007c453f757927d17
@@ -771,6 +818,9 @@ SPEC CHECKSUMS:
771818
React-jsiexecutor: 59d1eb03af7d30b7d66589c410f13151271e8006
772819
React-jsinspector: b511447170f561157547bc0bef3f169663860be7
773820
React-logger: c5b527272d5f22eaa09bb3c3a690fee8f237ae95
821+
react-native-config: 86038147314e2e6d10ea9972022aa171e6b1d4d8
822+
react-native-google-maps: 1bcc1f9f13f798fcf230db7fe476f3566d0bc0a3
823+
react-native-maps: 72a8a903f8a1b53e2c777ba79102078ab502e0bf
774824
react-native-safe-area-context: 9697629f7b2cda43cf52169bb7e0767d330648c2
775825
react-native-slider: 1cdd6ba29675df21f30544253bf7351d3c2d68c4
776826
React-NativeModulesApple: c57f3efe0df288a6532b726ad2d0322a9bf38472
@@ -800,6 +850,6 @@ SPEC CHECKSUMS:
800850
Yoga: 8796b55dba14d7004f980b54bcc9833ee45b28ce
801851
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
802852

803-
PODFILE CHECKSUM: d169b4508f413ff5d69cdf38428960e0828e6282
853+
PODFILE CHECKSUM: ad82a989387dcdb1ce80667f16b998a2644cf0b2
804854

805855
COCOAPODS: 1.12.0

‎examples/default/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
"native-base": "^3.4.28",
1919
"react": "18.2.0",
2020
"react-native": "0.72.3",
21+
"react-native-config": "^1.5.1",
2122
"react-native-gesture-handler": "^2.13.4",
23+
"react-native-maps": "^1.10.3",
2224
"react-native-reanimated": "^3.5.4",
2325
"react-native-safe-area-context": "^4.5.3",
2426
"react-native-screens": "^3.20.0",

‎examples/default/src/navigation/HomeStack.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { FlatListScreen } from '../screens/user-steps/FlatListScreen';
1515
import { ComplexViewsScreen } from '../screens/user-steps/ComplexViewsScreen';
1616
import { SectionListScreen } from '../screens/user-steps/SectionListScreen';
1717
import { GesturesScreen } from '../screens/user-steps/GesturesScreen';
18+
import { GoogleMapsScreen } from '../screens/user-steps/GoogleMapsScreen';
1819
import { LargeImageListScreen } from '../screens/user-steps/LargeImageListScreen';
1920
import { SessionReplayScreen } from '../screens/SessionReplayScreen';
2021

@@ -32,6 +33,7 @@ export type HomeStackParamList = {
3233
ComplexViews: undefined;
3334
SectionList: undefined;
3435
Gestures: undefined;
36+
GoogleMapsScreen: undefined;
3537
LargeImageList: undefined;
3638
SessionReplay: undefined;
3739
};
@@ -70,6 +72,11 @@ export const HomeStackNavigator: React.FC = () => {
7072
component={UserStepsScreen}
7173
options={{ title: 'User Steps' }}
7274
/>
75+
<HomeStack.Screen
76+
name="GoogleMapsScreen"
77+
component={GoogleMapsScreen}
78+
options={{ title: 'Google Map screen' }}
79+
/>
7380
<HomeStack.Screen
7481
name="BasicComponents"
7582
component={BasicComponentsScreen}

‎examples/default/src/screens/user-steps/GoogleMapsScreen.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
3+
import { Screen } from '../../components/Screen';
4+
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
5+
import { StyleSheet, View } from 'react-native';
6+
7+
/**
8+
* don't forgot to add Google API key to
9+
* examples/default/android/app/src/main/res/values/strings.xml
10+
* examples/default/ios/InstabugExample/AppDelegate.mm
11+
*
12+
* **/
13+
14+
const styles = StyleSheet.create({
15+
container: {
16+
...StyleSheet.absoluteFillObject,
17+
height: '100%',
18+
width: '100%',
19+
alignItems: 'stretch',
20+
},
21+
map: {
22+
...StyleSheet.absoluteFillObject,
23+
height: '100%',
24+
width: '100%',
25+
},
26+
});
27+
export const GoogleMapsScreen: React.FC = () => {
28+
return (
29+
<Screen>
30+
<View style={styles.container}>
31+
<MapView
32+
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
33+
style={styles.map}
34+
region={{
35+
latitude: 37.78825,
36+
longitude: -122.4324,
37+
latitudeDelta: 0.015,
38+
longitudeDelta: 0.0121,
39+
}}
40+
/>
41+
</View>
42+
</Screen>
43+
);
44+
};

0 commit comments

Comments
 (0)