docs: improve example app usability

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,31 +79,32 @@ const HomeScreen = () => {
       </View>
       {/* Spacer */}
       <View style={CommonStyles.buttonContainer}>
-        <Button
+        <ExampleAppButton
           title="Navigation"
           onPress={() => isFocused && navigate('Navigation')}
         />
       </View>
       <View style={CommonStyles.buttonContainer}>
-        <Button
+        <ExampleAppButton
           title="Multiple Maps"
           onPress={() => isFocused && navigate('Multiple maps')}
         />
       </View>
       <View style={CommonStyles.buttonContainer}>
-        <Button
+        <ExampleAppButton
           title="Map ID"
           onPress={() => isFocused && navigate('Map ID')}
         />
       </View>
       {/* Spacer */}
       <View style={CommonStyles.container} />
       <View style={CommonStyles.buttonContainer}>
-        <Button
-          color="grey"
+        <ExampleAppButton
           title="Integration Tests"
-          testID="integration_tests_button"
           onPress={() => isFocused && navigate('Integration tests')}
+          backgroundColor="grey"
+          pressedBackgroundColor="darkGrey"
+          testID="integration_tests_button"
         />
       </View>
     </View>

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 (
+    <Pressable
+      testID={testID}
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      android_ripple={
+        disabled ? undefined : { color: 'rgba(0,0,0,0.15)', foreground: true }
+      }
+      style={({ pressed }) => [
+        styles.buttonBase,
+        {
+          backgroundColor:
+            pressed && !disabled ? resolvedPressed : resolvedBackground,
+        },
+        disabled && styles.buttonDisabled,
+      ]}
+    >
+      <Text
+        style={[
+          styles.buttonText,
+          {
+            color: resolvedTextColor,
+          },
+        ]}
+      >
+        {title}
+      </Text>
+    </Pressable>
+  );
+};
+
+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,
+  },
+});

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<MapControlsProps> = ({
         placeholderTextColor="#000"
         keyboardType="numeric"
       />
-      <Button title="Move camera" onPress={moveCamera} />
-      <Button
+      <ExampleAppButton title="Move camera" onPress={moveCamera} />
+      <ExampleAppButton
         title="Zoom in"
         onPress={() => {
           setZoom((zoom ?? defaultZoom) + 1);
         }}
       />
-      <Button
+      <ExampleAppButton
         title="Zoom Out"
         onPress={() => {
           setZoom((zoom ?? defaultZoom) - 1);
         }}
       />
-      <Button title="Add marker" onPress={() => addMarker()} />
-      <Button title="Add custom marker" onPress={() => addCustomMarker()} />
-      <Button title="Add circle" onPress={addCircle} />
-      <Button title="Add polyline" onPress={addPolyline} />
-      <Button title="Add polygon" onPress={addPolygon} />
-      <Button title="Clear map view" onPress={clearMapView} />
-      <Button title="Get UI Settings" onPress={getUiSettings} />
-      <Button title="Get My location" onPress={getMyLocation} />
-      <Button
+      <ExampleAppButton title="Add marker" onPress={() => addMarker()} />
+      <ExampleAppButton
+        title="Add custom marker"
+        onPress={() => addCustomMarker()}
+      />
+      <ExampleAppButton title="Add circle" onPress={addCircle} />
+      <ExampleAppButton title="Add polyline" onPress={addPolyline} />
+      <ExampleAppButton title="Add polygon" onPress={addPolygon} />
+      <ExampleAppButton title="Clear map view" onPress={clearMapView} />
+      <ExampleAppButton title="Get UI Settings" onPress={getUiSettings} />
+      <ExampleAppButton title="Get My location" onPress={getMyLocation} />
+      <ExampleAppButton
         title="Get My location enabled"
         onPress={getIsMyLocationEnabled}
       />
-      <Button title="Get camera position" onPress={getCameraPositionClicked} />
+      <ExampleAppButton
+        title="Get camera position"
+        onPress={getCameraPositionClicked}
+      />
       <View style={ControlStyles.rowContainer}>
         <Text>Location marker</Text>
-        <Button
+        <ExampleAppButton
           title={enableLocationMarker ? 'Disable' : 'Enable'}
           onPress={() => {
             setEnableLocationMarker(!enableLocationMarker);
@@ -325,7 +332,7 @@ const MapsControls: React.FC<MapControlsProps> = ({
       <View style={ControlStyles.controlButtonGap} />
       <View style={ControlStyles.rowContainer}>
         <Text>Custom map paddings</Text>
-        <Button
+        <ExampleAppButton
           title={customPaddingEnabled ? 'Disable' : 'Enable'}
           onPress={toggleCustomPadding}
         />