diff --git a/example/src/App.tsx b/example/src/App.tsx
index d91c528..c0c840d 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -23,8 +23,9 @@ import {
} from '@react-navigation/native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { createStackNavigator } from '@react-navigation/stack';
-import { View, Button, Text } from 'react-native';
+import { View, Text } from 'react-native';
import { CommonStyles } from './styles/components';
+import { ExampleAppButton } from './controls/ExampleAppButton';
import NavigationScreen from './screens/NavigationScreen';
import MultipleMapsScreen from './screens/MultipleMapsScreen';
import MapIdScreen from './screens/MapIdScreen';
@@ -78,19 +79,19 @@ const HomeScreen = () => {
{/* Spacer */}
-
-
-
diff --git a/example/src/controls/ExampleAppButton.tsx b/example/src/controls/ExampleAppButton.tsx
new file mode 100644
index 0000000..6c82257
--- /dev/null
+++ b/example/src/controls/ExampleAppButton.tsx
@@ -0,0 +1,96 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Pressable, Text, StyleSheet } from 'react-native';
+import { Colors, BorderRadius, Typography, Spacing } from '../styles/theme';
+
+type ExampleAppButtonProps = {
+ title: string;
+ onPress: () => void;
+ backgroundColor?: string;
+ pressedBackgroundColor?: string;
+ textColor?: string;
+ disabled?: boolean;
+ testID?: string;
+};
+
+export const ExampleAppButton = ({
+ title,
+ onPress,
+ backgroundColor,
+ pressedBackgroundColor: pressedColor,
+ textColor: textColor,
+ disabled = false,
+ testID,
+}: ExampleAppButtonProps) => {
+ const resolvedBackground = disabled
+ ? Colors.buttonDisabled
+ : (backgroundColor ?? Colors.button);
+ const resolvedPressed = disabled
+ ? Colors.buttonDisabled
+ : (pressedColor ?? Colors.buttonPressed);
+ const resolvedTextColor = disabled
+ ? Colors.textDisabled
+ : (textColor ?? Colors.buttonText);
+
+ return (
+ [
+ styles.buttonBase,
+ {
+ backgroundColor:
+ pressed && !disabled ? resolvedPressed : resolvedBackground,
+ },
+ disabled && styles.buttonDisabled,
+ ]}
+ >
+
+ {title}
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ buttonBase: {
+ paddingVertical: Spacing.md,
+ paddingHorizontal: Spacing.lg,
+ borderRadius: BorderRadius.lg,
+ alignItems: 'center',
+ marginVertical: Spacing.xs,
+ },
+ buttonText: {
+ fontWeight: Typography.fontWeight.semibold,
+ fontSize: Typography.fontSize.md,
+ },
+ buttonDisabled: {
+ opacity: 0.6,
+ },
+});
diff --git a/example/src/controls/mapsControls.tsx b/example/src/controls/mapsControls.tsx
index 3f3b1bb..54d736d 100644
--- a/example/src/controls/mapsControls.tsx
+++ b/example/src/controls/mapsControls.tsx
@@ -16,7 +16,8 @@
import React, { useEffect, useState } from 'react';
-import { Button, Text, TextInput, View } from 'react-native';
+import { Text, TextInput, View } from 'react-native';
+import { ExampleAppButton } from './ExampleAppButton';
import SelectDropdown from 'react-native-select-dropdown';
import { ControlStyles } from '../styles/components';
@@ -255,35 +256,41 @@ const MapsControls: React.FC = ({
placeholderTextColor="#000"
keyboardType="numeric"
/>
-
-
+ {
setZoom((zoom ?? defaultZoom) + 1);
}}
/>
-