From e500fd7f842036253f48f346ccb7c82b751bd802 Mon Sep 17 00:00:00 2001
From: Joonas Kerttula <joonas.kerttula@codemate.com>
Date: Wed, 3 Dec 2025 16:15:10 +0200
Subject: [PATCH] docs: improve example app usability

---
 example/src/App.tsx                           | 16 ++--
 example/src/controls/ExampleAppButton.tsx     | 96 +++++++++++++++++++
 example/src/controls/mapsControls.tsx         | 39 ++++----
 example/src/controls/navigationControls.tsx   | 95 +++++++++++-------
 example/src/helpers/overlayModal.tsx          | 77 ++++++++-------
 .../src/screens/IntegrationTestsScreen.tsx    | 61 ++++++------
 example/src/screens/MapIdScreen.tsx           | 15 +--
 example/src/screens/MultipleMapsScreen.tsx    | 21 ++--
 example/src/screens/NavigationScreen.tsx      | 12 ++-
 example/src/styles/theme.ts                   |  2 +
 10 files changed, 292 insertions(+), 142 deletions(-)
 create mode 100644 example/src/controls/ExampleAppButton.tsx

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 = () => {
       </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')}
         />
@@ -98,11 +99,12 @@ const HomeScreen = () => {
       {/* 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>
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 (
+    <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,
+  },
+});
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<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}
         />
diff --git a/example/src/controls/navigationControls.tsx b/example/src/controls/navigationControls.tsx
index 1d9d067..0ec8457 100644
--- a/example/src/controls/navigationControls.tsx
+++ b/example/src/controls/navigationControls.tsx
@@ -15,7 +15,8 @@
  */
 
 import React, { useState } from 'react';
-import { Alert, Button, Platform, Text, TextInput, View } from 'react-native';
+import { Alert, Platform, Text, TextInput, View } from 'react-native';
+import { ExampleAppButton } from './ExampleAppButton';
 import {
   CameraPerspective,
   NavigationNightMode,
@@ -349,48 +350,72 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
         placeholderTextColor="#000"
         keyboardType="numeric"
       />
-      <Button
+      <ExampleAppButton
         title="Set target from Camera Location"
         onPress={setLocationFromCameraLocation}
       />
-      <Button
+      <ExampleAppButton
         title="Simulate location from target"
         onPress={simulateLocation}
       />
-      <Button title="Set target as Destination" onPress={initWaypoint} />
+      <ExampleAppButton
+        title="Set target as Destination"
+        onPress={initWaypoint}
+      />
       <View style={ControlStyles.controlButtonGap} />
-      <Button title="Set multiple destinations" onPress={initWaypoints} />
-      <Button title="Dispose navigation" onPress={disposeNavigation} />
-      <Button
+      <ExampleAppButton
+        title="Set multiple destinations"
+        onPress={initWaypoints}
+      />
+      <ExampleAppButton
+        title="Dispose navigation"
+        onPress={disposeNavigation}
+      />
+      <ExampleAppButton
         title="Continue to next destination"
         onPress={continueToNextDestination}
       />
-      <Button title="Clear Destination" onPress={clearDestinations} />
-      <Button title="Start guidance" onPress={startGuidance} />
-      <Button title="Stop guidance" onPress={stopGuidance} />
-      <Button title="Start updating location" onPress={startUpdatingLocation} />
-      <Button title="Stop updating location" onPress={stopUpdatingLocation} />
-      <Button title="Start simulation" onPress={startSimulation} />
-      <Button title="Stop simulation" onPress={stopSimulation} />
-      <Button title="Pause simulation" onPress={pauseSimulation} />
-      <Button title="Resume simulation" onPress={resumeSimulation} />
-      <Button title="Show route overview" onPress={showRouteOverview} />
-      <Button title="NavSDK version" onPress={getNavSDKVersion} />
-      <Button title="Are terms accepted?" onPress={getAreTermsAccepted} />
-      <Button title="Set speed alert options" onPress={setSpeedAlertOptions} />
-      <Button
+      <ExampleAppButton title="Clear Destination" onPress={clearDestinations} />
+      <ExampleAppButton title="Start guidance" onPress={startGuidance} />
+      <ExampleAppButton title="Stop guidance" onPress={stopGuidance} />
+      <ExampleAppButton
+        title="Start updating location"
+        onPress={startUpdatingLocation}
+      />
+      <ExampleAppButton
+        title="Stop updating location"
+        onPress={stopUpdatingLocation}
+      />
+      <ExampleAppButton title="Start simulation" onPress={startSimulation} />
+      <ExampleAppButton title="Stop simulation" onPress={stopSimulation} />
+      <ExampleAppButton title="Pause simulation" onPress={pauseSimulation} />
+      <ExampleAppButton title="Resume simulation" onPress={resumeSimulation} />
+      <ExampleAppButton
+        title="Show route overview"
+        onPress={showRouteOverview}
+      />
+      <ExampleAppButton title="NavSDK version" onPress={getNavSDKVersion} />
+      <ExampleAppButton
+        title="Are terms accepted?"
+        onPress={getAreTermsAccepted}
+      />
+      <ExampleAppButton
+        title="Set speed alert options"
+        onPress={setSpeedAlertOptions}
+      />
+      <ExampleAppButton
         title="Get current time and distance"
         onPress={getCurrentTimeAndDistanceClicked}
       />
-      <Button
+      <ExampleAppButton
         title="Get current route segment"
         onPress={getCurrentRouteSegment}
       />
-      <Button title="Get route segments" onPress={getRouteSegments} />
-      <Button title="Get traveled path" onPress={getTraveledPath} />
+      <ExampleAppButton title="Get route segments" onPress={getRouteSegments} />
+      <ExampleAppButton title="Get traveled path" onPress={getTraveledPath} />
       <View style={ControlStyles.rowContainer}>
         <Text>Toggle trip progress bar</Text>
-        <Button
+        <ExampleAppButton
           title={tripProgressBarEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             setTripProgressBarEnabled(!tripProgressBarEnabled);
@@ -402,7 +427,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       </View>
       <View style={ControlStyles.rowContainer}>
         <Text>Toggle report incident button</Text>
-        <Button
+        <ExampleAppButton
           title={reportIncidentButtonEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             setReportIncidentButtonEnabled(!reportIncidentButtonEnabled);
@@ -414,7 +439,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       </View>
       <View style={ControlStyles.rowContainer}>
         <Text>Speed limit icon</Text>
-        <Button
+        <ExampleAppButton
           title={speedLimitIconEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             toggleSpeedLimitIconEnabled(!speedLimitIconEnabled);
@@ -423,7 +448,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       </View>
       <View style={ControlStyles.rowContainer}>
         <Text>Speedometer</Text>
-        <Button
+        <ExampleAppButton
           title={speedometerEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             toggleSpeedometerEnabled(!speedometerEnabled);
@@ -432,7 +457,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       </View>
       <View style={ControlStyles.rowContainer}>
         <Text>Traffic incidents card</Text>
-        <Button
+        <ExampleAppButton
           title={trafficIncidentCardsEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             toggleTrafficIncidentCardsEnabled(!trafficIncidentCardsEnabled);
@@ -441,7 +466,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       </View>
       <View style={ControlStyles.rowContainer}>
         <Text>Navigation UI</Text>
-        <Button
+        <ExampleAppButton
           title={navigationUiEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             toggleNavigationUiEnabled(!navigationUiEnabled);
@@ -450,7 +475,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       </View>
       <View style={ControlStyles.rowContainer}>
         <Text>Turn-by-turn logging</Text>
-        <Button
+        <ExampleAppButton
           title={turnByTurnLoggingEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             toggleTurnByTurnLoggingEnabled(!turnByTurnLoggingEnabled);
@@ -460,7 +485,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       {Platform.OS === 'ios' ? (
         <View style={ControlStyles.rowContainer}>
           <Text>Background location updates</Text>
-          <Button
+          <ExampleAppButton
             title={backgroundLocationUpdatesEnabled ? 'Disable' : 'Enable'}
             onPress={() => {
               toggleBackgroundLocationUpdatesEnabled(
@@ -472,7 +497,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       ) : null}
       <View style={ControlStyles.rowContainer}>
         <Text>Recenter button</Text>
-        <Button
+        <ExampleAppButton
           title={recenterButtonEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             toggleRecenterButtonEnabled(!recenterButtonEnabled);
@@ -481,7 +506,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       </View>
       <View style={ControlStyles.rowContainer}>
         <Text>Header enabled</Text>
-        <Button
+        <ExampleAppButton
           title={headerEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             toggleHeaderEnabled(!headerEnabled);
@@ -490,7 +515,7 @@ const NavigationControls: React.FC<NavigationControlsProps> = ({
       </View>
       <View style={ControlStyles.rowContainer}>
         <Text>Footer enabled</Text>
-        <Button
+        <ExampleAppButton
           title={footerEnabled ? 'Disable' : 'Enable'}
           onPress={() => {
             toggleFooterEnabled(!footerEnabled);
diff --git a/example/src/helpers/overlayModal.tsx b/example/src/helpers/overlayModal.tsx
index 066a7b6..26855da 100644
--- a/example/src/helpers/overlayModal.tsx
+++ b/example/src/helpers/overlayModal.tsx
@@ -15,15 +15,8 @@
  */
 
 import React, { type ReactNode } from 'react';
-import {
-  View,
-  Modal,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  ScrollView,
-} from 'react-native';
+import { View, Modal, StyleSheet, Pressable, ScrollView } from 'react-native';
+import { ExampleAppButton } from '../controls/ExampleAppButton';
 
 interface OverlayModalProps {
   visible: boolean;
@@ -50,27 +43,26 @@ const OverlayModal: React.FC<OverlayModalProps> = ({
       animationType="slide"
       onRequestClose={closeOverlay}
     >
-      <TouchableWithoutFeedback onPress={closeOverlay}>
-        <View style={styles.overlay}>
-          <TouchableWithoutFeedback>
-            <View style={modalContentStyle}>
-              <ScrollView
-                showsVerticalScrollIndicator={true}
-                persistentScrollbar={true}
-                style={styles.scrollContainer}
-              >
-                {children}
-              </ScrollView>
-              <TouchableOpacity
-                onPress={closeOverlay}
-                style={styles.closeButton}
-              >
-                <Text style={styles.closeButtonText}>Close</Text>
-              </TouchableOpacity>
-            </View>
-          </TouchableWithoutFeedback>
+      <View style={styles.overlay}>
+        <Pressable style={styles.overlayTouchable} onPress={closeOverlay} />
+        <View style={modalContentStyle}>
+          <ScrollView
+            showsVerticalScrollIndicator={true}
+            persistentScrollbar={true}
+            style={styles.scrollContainer}
+            contentContainerStyle={styles.scrollContentContainer}
+          >
+            <View style={styles.scrollContent}>{children}</View>
+          </ScrollView>
+          <View style={styles.closeButtonContainer}>
+            <ExampleAppButton
+              title="Close"
+              onPress={closeOverlay}
+              backgroundColor="#dc3545"
+            />
+          </View>
         </View>
-      </TouchableWithoutFeedback>
+      </View>
     </Modal>
   );
 };
@@ -80,6 +72,9 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'flex-end',
   },
+  overlayTouchable: {
+    ...StyleSheet.absoluteFillObject,
+  },
   modalContent: {
     height: '60%',
     backgroundColor: '#fff',
@@ -98,15 +93,23 @@ const styles = StyleSheet.create({
   scrollContainer: {
     flexGrow: 1,
   },
-  closeButton: {
-    padding: 10,
-    backgroundColor: '#dc3545',
-    borderRadius: 5,
-    alignItems: 'center',
+  scrollContentContainer: {
+    flexGrow: 1,
+    minHeight: '100%',
   },
-  closeButtonText: {
-    color: '#fff',
-    fontSize: 16,
+  scrollContent: {
+    flex: 1,
+  },
+  closeButtonContainer: {
+    marginTop: 8,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: -2,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 4,
   },
 });
 
diff --git a/example/src/screens/IntegrationTestsScreen.tsx b/example/src/screens/IntegrationTestsScreen.tsx
index f1b51ee..ed56fe4 100644
--- a/example/src/screens/IntegrationTestsScreen.tsx
+++ b/example/src/screens/IntegrationTestsScreen.tsx
@@ -16,7 +16,8 @@
  */
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { Button, Text, View, useWindowDimensions } from 'react-native';
+import { Text, View, useWindowDimensions } from 'react-native';
+import { ExampleAppButton } from '../controls/ExampleAppButton';
 import Snackbar from 'react-native-snackbar';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -252,7 +253,7 @@ const IntegrationTestsScreen = () => {
         <Text testID="test_status_label">Test status: {testStatusString}</Text>
         <Text testID="test_result_label">Test result: {testResult}</Text>
         <Text testID="failure_message_label">{failureMessage}</Text>
-        <Button
+        <ExampleAppButton
           title="Reset"
           onPress={() => {
             resetTestState();
@@ -260,12 +261,12 @@ const IntegrationTestsScreen = () => {
         />
       </View>
       <View style={ControlStyles.controlButtons}>
-        <Button
+        <ExampleAppButton
           title="Tests"
-          testID="tests_menu_button"
           onPress={() => {
             setIsOverlayOpen(true);
           }}
+          testID="tests_menu_button"
         />
       </View>
       <OverlayModal
@@ -275,96 +276,96 @@ const IntegrationTestsScreen = () => {
         }}
         height={overlayMinHeight}
       >
-        <Button
+        <ExampleAppButton
           title="testNavigationSessionInitialization"
-          testID="testNavigationSessionInitialization"
           onPress={() => {
             runTest('testNavigationSessionInitialization');
           }}
+          testID="testNavigationSessionInitialization"
         />
-        <Button
+        <ExampleAppButton
           title="testMapInitialization"
-          testID="testMapInitialization"
           onPress={() => {
             runTest('testMapInitialization');
           }}
+          testID="testMapInitialization"
         />
-        <Button
+        <ExampleAppButton
           title="testNavigationToSingleDestination"
-          testID="testNavigationToSingleDestination"
           onPress={() => {
             runTest('testNavigationToSingleDestination');
           }}
+          testID="testNavigationToSingleDestination"
         />
-        <Button
+        <ExampleAppButton
           title="testNavigationToMultipleDestination"
-          testID="testNavigationToMultipleDestination"
           onPress={() => {
             runTest('testNavigationToMultipleDestination');
           }}
+          testID="testNavigationToMultipleDestination"
         />
-        <Button
+        <ExampleAppButton
           title="testRouteSegments"
-          testID="testRouteSegments"
           onPress={() => {
             runTest('testRouteSegments');
           }}
+          testID="testRouteSegments"
         />
-        <Button
+        <ExampleAppButton
           title="testGetCurrentTimeAndDistance"
-          testID="testGetCurrentTimeAndDistance"
           onPress={() => {
             runTest('testGetCurrentTimeAndDistance');
           }}
+          testID="testGetCurrentTimeAndDistance"
         />
-        <Button
+        <ExampleAppButton
           title="testMoveCamera"
-          testID="testMoveCamera"
           onPress={() => {
             runTest('testMoveCamera');
           }}
+          testID="testMoveCamera"
         />
-        <Button
+        <ExampleAppButton
           title="testTiltZoomBearingCamera"
-          testID="testTiltZoomBearingCamera"
           onPress={() => {
             runTest('testTiltZoomBearingCamera');
           }}
+          testID="testTiltZoomBearingCamera"
         />
-        <Button
+        <ExampleAppButton
           title="testOnRemainingTimeOrDistanceChanged"
-          testID="testOnRemainingTimeOrDistanceChanged"
           onPress={() => {
             runTest('testOnRemainingTimeOrDistanceChanged');
           }}
+          testID="testOnRemainingTimeOrDistanceChanged"
         />
-        <Button
+        <ExampleAppButton
           title="testOnArrival"
-          testID="testOnArrival"
           onPress={() => {
             runTest('testOnArrival');
           }}
+          testID="testOnArrival"
         />
-        <Button
+        <ExampleAppButton
           title="testOnRouteChanged"
-          testID="testOnRouteChanged"
           onPress={() => {
             runTest('testOnRouteChanged');
           }}
+          testID="testOnRouteChanged"
         />
-        <Button
+        <ExampleAppButton
           title="testNavigationStateGuards"
-          testID="testNavigationStateGuards"
           onPress={() => {
             runTest('testNavigationStateGuards');
           }}
+          testID="testNavigationStateGuards"
         />
-        <Button
+        <ExampleAppButton
           title="testStartGuidanceWithoutDestinations"
-          testID="testStartGuidanceWithoutDestinations"
           onPress={() => {
             runTest('testStartGuidanceWithoutDestinations');
           }}
+          testID="testStartGuidanceWithoutDestinations"
         />
       </OverlayModal>
     </View>
diff --git a/example/src/screens/MapIdScreen.tsx b/example/src/screens/MapIdScreen.tsx
index c3dc13c..215e05a 100644
--- a/example/src/screens/MapIdScreen.tsx
+++ b/example/src/screens/MapIdScreen.tsx
@@ -19,11 +19,11 @@ import {
   View,
   Text,
   TextInput,
-  Button,
   StyleSheet,
   Alert,
   ScrollView,
 } from 'react-native';
+import { ExampleAppButton } from '../controls/ExampleAppButton';
 import { CommonStyles, MapStyles } from '../styles/components';
 import {
   NavigationView,
@@ -226,7 +226,10 @@ const MapIdScreen = () => {
           </View>
 
           <View style={CommonStyles.buttonContainer}>
-            <Button title="Set Map ID and Show Maps" onPress={handleSetMapId} />
+            <ExampleAppButton
+              title="Set Map ID and Show Maps"
+              onPress={handleSetMapId}
+            />
           </View>
 
           <View style={CommonStyles.infoContainer}>
@@ -246,7 +249,7 @@ const MapIdScreen = () => {
             <Text style={CommonStyles.headerText}>
               Map ID: {confirmedMapId || '(Default styling)'}
             </Text>
-            <Button title="Change Map ID" onPress={handleReset} />
+            <ExampleAppButton title="Change Map ID" onPress={handleReset} />
           </View>
 
           {/* NavigationView */}
@@ -254,7 +257,7 @@ const MapIdScreen = () => {
             <View style={styles.mapHeader}>
               <Text style={MapStyles.mapTitle}>Navigation View</Text>
               <View style={styles.headerButtons}>
-                <Button
+                <ExampleAppButton
                   title={
                     navigationUiEnabled ? 'Disable Nav UI' : 'Enable Nav UI'
                   }
@@ -262,7 +265,7 @@ const MapIdScreen = () => {
                     toggleNavigationUiEnabled(!navigationUiEnabled)
                   }
                 />
-                <Button
+                <ExampleAppButton
                   title={getNavigationNightModeLabel()}
                   onPress={cycleNavigationNightMode}
                 />
@@ -298,7 +301,7 @@ const MapIdScreen = () => {
           </View>
 
           <View style={styles.mapColorSchemeCard}>
-            <Button
+            <ExampleAppButton
               title={`Map Color Scheme: ${getMapColorSchemeLabel()}`}
               onPress={cycleMapColorScheme}
             />
diff --git a/example/src/screens/MultipleMapsScreen.tsx b/example/src/screens/MultipleMapsScreen.tsx
index 9b710ab..9e9db5a 100644
--- a/example/src/screens/MultipleMapsScreen.tsx
+++ b/example/src/screens/MultipleMapsScreen.tsx
@@ -21,7 +21,8 @@ import React, {
   useCallback,
   useRef,
 } from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
+import { ExampleAppButton } from '../controls/ExampleAppButton';
 import PagerView, {
   type PagerViewOnPageSelectedEvent,
 } from 'react-native-pager-view';
@@ -313,7 +314,7 @@ const MultipleMapsScreen = () => {
   return arePermissionsApproved ? (
     <View style={[CommonStyles.container, { paddingBottom: insets.bottom }]}>
       <View style={CommonStyles.buttonContainer}>
-        <Button
+        <ExampleAppButton
           title={mapsVisible ? 'Hide maps' : 'Show maps'}
           onPress={() => setMapsVisible(v => !v)}
         />
@@ -322,12 +323,12 @@ const MultipleMapsScreen = () => {
       {mapsVisible && (
         <React.Fragment>
           <View style={ControlStyles.pagerButtons}>
-            <Button
+            <ExampleAppButton
               title="Navigation page"
               onPress={() => goToPage(0)}
               disabled={currentPage === 0}
             />
-            <Button
+            <ExampleAppButton
               title="Map page"
               onPress={() => goToPage(1)}
               disabled={currentPage === 1}
@@ -354,12 +355,15 @@ const MultipleMapsScreen = () => {
                 onNavigationViewControllerCreated={setNavigationViewController1}
               />
               <View style={ControlStyles.controlButtons}>
-                <Button
+                <ExampleAppButton
                   title="Nav (Map 1)"
                   onPress={onShowNavControlsClick}
                   disabled={!navigationInitialized}
                 />
-                <Button title="Map 1" onPress={onShowMapsControlsClick1} />
+                <ExampleAppButton
+                  title="Map 1"
+                  onPress={onShowMapsControlsClick1}
+                />
               </View>
             </View>
             {/* Page 2: MapView */}
@@ -372,7 +376,10 @@ const MultipleMapsScreen = () => {
               />
               {currentPage === 1 && (
                 <View style={ControlStyles.controlButtons}>
-                  <Button title="Map 2" onPress={onShowMapsControlsClick2} />
+                  <ExampleAppButton
+                    title="Map 2"
+                    onPress={onShowMapsControlsClick2}
+                  />
                 </View>
               )}
             </View>
diff --git a/example/src/screens/NavigationScreen.tsx b/example/src/screens/NavigationScreen.tsx
index 3c0dcc2..9974dbb 100644
--- a/example/src/screens/NavigationScreen.tsx
+++ b/example/src/screens/NavigationScreen.tsx
@@ -15,7 +15,8 @@
  */
 
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
+import { ExampleAppButton } from '../controls/ExampleAppButton';
 import Snackbar from 'react-native-snackbar';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -357,14 +358,17 @@ const NavigationScreen = () => {
       )}
 
       <View style={CommonStyles.buttonRow}>
-        <Button
+        <ExampleAppButton
           title="Navigation"
           onPress={onShowNavControlsClick}
           disabled={!navigationInitialized}
         />
-        <Button title="Maps" onPress={onShowMapsControlsClick} />
+        <ExampleAppButton title="Maps" onPress={onShowMapsControlsClick} />
         {mapViewAutoAvailable && (
-          <Button title="Auto" onPress={onShowAutoMapsControlsClick} />
+          <ExampleAppButton
+            title="Auto"
+            onPress={onShowAutoMapsControlsClick}
+          />
         )}
       </View>
     </View>
diff --git a/example/src/styles/theme.ts b/example/src/styles/theme.ts
index 37a14a3..9a22d05 100644
--- a/example/src/styles/theme.ts
+++ b/example/src/styles/theme.ts
@@ -42,7 +42,9 @@ export const Colors = {
 
   // Interactive colors
   button: '#2196f3',
+  buttonPressed: '#1c89e1ff',
   buttonDisabled: '#cccccc',
+  buttonText: '#ffffff',
 
   // Dropdown selection colors
   dropdownSelected: '#D2D9DF',