feat(example): add google maps screen

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

@@ -22,5 +22,8 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
+        <meta-data
+                android:name="com.google.android.geo.API_KEY"
+                android:value="@string/google_maps_key" />
     </application>
 </manifest>

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

@@ -1,3 +1,5 @@
 <resources>
     <string name="app_name">Instabug - React Native</string>
+    <string name="google_maps_key" translatable="false">API Key</string>
+
 </resources>

examples/default/ios/InstabugExample/AppDelegate.mm

@@ -1,4 +1,5 @@
 #import "AppDelegate.h"
+#import <GoogleMaps/GoogleMaps.h>
 
 #import <React/RCTBundleURLProvider.h>
 
@@ -10,6 +11,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   // You can add your custom initial props in the dictionary below.
   // They will be passed down to the ViewController used by React Native.
   self.initialProps = @{};
+ [GMSServices provideAPIKey:@"API KEY"]; // use the api key obtained from Google Console
 
   return [super application:application didFinishLaunchingWithOptions:launchOptions];
 }

examples/default/ios/Podfile

@@ -1,7 +1,8 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
+
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-platform :ios, min_ios_version_supported
+platform :ios, '13.4'
 prepare_react_native_project!
 
 # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
@@ -23,7 +24,8 @@ end
 
 target 'InstabugExample' do
   config = use_native_modules!
-
+  rn_maps_path = '../node_modules/react-native-maps'
+  pod 'react-native-google-maps', :path => rn_maps_path
   # Flags change depending on the env values.
   flags = get_default_flags()
 

examples/default/package.json

@@ -19,6 +19,7 @@
     "react": "18.2.0",
     "react-native": "0.72.3",
     "react-native-gesture-handler": "^2.13.4",
+    "react-native-maps": "^1.10.3",
     "react-native-reanimated": "^3.5.4",
     "react-native-safe-area-context": "^4.5.3",
     "react-native-screens": "^3.20.0",

examples/default/src/navigation/HomeStack.tsx

@@ -15,6 +15,7 @@ import { FlatListScreen } from '../screens/user-steps/FlatListScreen';
 import { ComplexViewsScreen } from '../screens/user-steps/ComplexViewsScreen';
 import { SectionListScreen } from '../screens/user-steps/SectionListScreen';
 import { GesturesScreen } from '../screens/user-steps/GesturesScreen';
+import { GoogleMapsScreen } from '../screens/user-steps/GoogleMapsScreen';
 
 export type HomeStackParamList = {
   Home: undefined;
@@ -30,6 +31,7 @@ export type HomeStackParamList = {
   ComplexViews: undefined;
   SectionList: undefined;
   Gestures: undefined;
+  GoogleMapsScreen: undefined;
 };
 
 const HomeStack = createNativeStackNavigator<HomeStackParamList>();
@@ -60,6 +62,11 @@ export const HomeStackNavigator: React.FC = () => {
         component={UserStepsScreen}
         options={{ title: 'User Steps' }}
       />
+      <HomeStack.Screen
+        name="GoogleMapsScreen"
+        component={GoogleMapsScreen}
+        options={{ title: 'Google  Map screen' }}
+      />
       <HomeStack.Screen
         name="BasicComponents"
         component={BasicComponentsScreen}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Screen } from '../../components/Screen';
+import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
+import { StyleSheet, View } from 'react-native';
+
+/**
+ *  don't forgot to add Google API key to
+ *  examples/default/android/app/src/main/res/values/strings.xml
+ *  examples/default/ios/InstabugExample/AppDelegate.mm
+ *
+ * **/
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    height: '100%',
+    width: '100%',
+    alignItems: 'stretch',
+  },
+  map: {
+    ...StyleSheet.absoluteFillObject,
+    height: '100%',
+    width: '100%',
+  },
+});
+export const GoogleMapsScreen: React.FC = () => {
+  return (
+    <Screen>
+      <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.015,
+            longitudeDelta: 0.0121,
+          }}
+        />
+      </View>
+    </Screen>
+  );
+};

examples/default/src/screens/user-steps/UserStepsScreen.tsx

@@ -16,6 +16,7 @@ export const UserStepsScreen: React.FC<NativeStackScreenProps<HomeStackParamList
       <ListTile title="Section List" onPress={() => navigation.navigate('SectionList')} />
       <ListTile title="Complex Views" onPress={() => navigation.navigate('ComplexViews')} />
       <ListTile title="Gestures" onPress={() => navigation.navigate('Gestures')} />
+      <ListTile title="Google Map" onPress={() => navigation.navigate('GoogleMapsScreen')} />
     </Screen>
   );
 };

examples/default/yarn.lock

@@ -2849,6 +2849,11 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@types/geojson@^7946.0.13":
+  version "7946.0.14"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
+  integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
+
 "@types/graceful-fs@^4.1.3":
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae"
@@ -6514,6 +6519,13 @@ react-native-gesture-handler@^2.13.4:
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
+react-native-maps@^1.10.3:
+  version "1.10.3"
+  resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-1.10.3.tgz#a669ee3a8baa01d30c5c7af7bdc498428d0e8284"
+  integrity sha512-P8/Viq5vgW9FRhvfDFQHxq02cZUcDJu6VbBZar7c/voGDbD5nrTIA0qlpiUAmrs1ikd8+7S4QjXQlorppBBMvA==
+  dependencies:
+    "@types/geojson" "^7946.0.13"
+
 react-native-reanimated@^3.5.4:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.5.4.tgz#a6c2b0c43b6dad246f5d276213974afedb8e3fc7"