chore(example): update example

Author: pinpong

example/ios/Podfile.lock

@@ -2474,7 +2474,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - RNGoogleMapsPlus (1.1.0-dev.5):
+  - RNGoogleMapsPlus (1.2.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -3086,14 +3086,14 @@ SPEC CHECKSUMS:
   ReactCodegen: 3873d7ac09960375f7845384ff47d53e478462dc
   ReactCommon: f5527f5d97a9957ab46eb5db78875d3579e03b97
   RNGestureHandler: e1cc4de7646eb557ad62d1271d8eac73c304a896
-  RNGoogleMapsPlus: cdea400ea1e69740d91e07dbb5882d93be4c0a77
+  RNGoogleMapsPlus: 43e90cbedb2f3deec67a3a0a14fb5065f608ea3c
   RNReanimated: 8f0185df21f0dea34ee8c9611ba88c17a290ed9a
   RNScreens: 2e9c41cd099b1ca50136af8d57c3594214d0086a
   RNWorklets: ab618bf7d1c7fd2cb793b9f0f39c3e29274b3ebf
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SVGKit: 1ad7513f8c74d9652f94ed64ddecda1a23864dea
   Yoga: ce55ebb197c21e22b6700cd36e3f36b7ec26e6f8
 
-PODFILE CHECKSUM: 246331f3f9b61838ac0bd43aa0f04db450c4bd52
+PODFILE CHECKSUM: 18d25340bc263a2eab86e2d8e5cfd9ad55ef6458
 
 COCOAPODS: 1.15.2

example/src/App.tsx

@@ -19,8 +19,10 @@ import CustomStyleScreen from './screens/CustomStyleScreen';
 import StressTestScreen from './screens/StressTestScreen';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useColorScheme } from 'react-native';
+import BlankScreen from './screens/BlankScreen';
+import type { RootStackParamList } from './types/navigation';
 
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<RootStackParamList>();
 
 export default function App() {
   const scheme = useColorScheme();
@@ -42,7 +44,11 @@ export default function App() {
             component={HomeScreen}
             options={{ title: 'Google Maps Examples' }}
           />
-
+          <Stack.Screen
+            name="Blank"
+            component={BlankScreen}
+            options={{ title: 'Blank Screen' }}
+          />
           <Stack.Screen
             name="BasicMap"
             component={BasicMapScreen}

example/src/components/ControlPanel.tsx

@@ -15,6 +15,8 @@ import Animated, {
 } from 'react-native-reanimated';
 import type { GoogleMapsViewRef } from 'react-native-google-maps-plus';
 import { useAppTheme } from '../theme';
+import { useNavigation } from '@react-navigation/native';
+import type { RootNavigationProp } from '../types/navigation';
 
 export type ButtonItem = { title: string; onPress: () => void };
 
@@ -25,6 +27,7 @@ type Props = {
 
 export default function ControlPanel({ mapRef, buttons }: Props) {
   const theme = useAppTheme();
+  const navigation = useNavigation<RootNavigationProp>();
   const progress = useSharedValue(0);
 
   const toggle = () => {
@@ -36,6 +39,10 @@ export default function ControlPanel({ mapRef, buttons }: Props) {
   const finalButtons = useMemo(
     () => [
       ...buttons,
+      {
+        title: `Navigate to blank screen`,
+        onPress: () => navigation.navigate('Blank'),
+      },
       {
         title: 'Request location permission',
         onPress: async () => {
@@ -57,7 +64,7 @@ export default function ControlPanel({ mapRef, buttons }: Props) {
           console.log(mapRef.current?.isGooglePlayServicesAvailable()),
       },
     ],
-    [buttons, mapRef]
+    [buttons, mapRef, navigation]
   );
 
   const buttonHeight = 52;

example/src/screens/BlankScreen.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { useNavigation, useTheme } from '@react-navigation/native';
+import type { RootNavigationProp } from '../types/navigation';
+
+export default function BlankScreen() {
+  const navigation = useNavigation<RootNavigationProp>();
+  const { colors } = useTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <Text style={[styles.title, { color: colors.text }]}>Blank Screen</Text>
+
+      <Text style={[styles.subtitle, { color: colors.text }]}>
+        This is an empty placeholder screen.
+      </Text>
+
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: colors.card }]}
+        activeOpacity={0.8}
+        onPress={() => navigation.goBack()}
+      >
+        <Text style={[styles.buttonText, { color: colors.text }]}>
+          ← Go Back
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    opacity: 0.8,
+    marginBottom: 32,
+  },
+  button: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 10,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

example/src/types/navigation.ts

@@ -0,0 +1,18 @@
+export type RootStackParamList = {
+  Home: undefined;
+  Blank: undefined;
+  BasicMap: undefined;
+  Markers: undefined;
+  Polygons: undefined;
+  Polylines: undefined;
+  Circles: undefined;
+  Heatmap: undefined;
+  KmlLayer: undefined;
+  Location: undefined;
+  CustomStyle: undefined;
+  StressTest: undefined;
+};
+
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+export type RootNavigationProp = NativeStackNavigationProp<RootStackParamList>;