chore: improve example app for easier feature testing

Author: jokerttu

example/src/App.tsx

@@ -77,7 +77,6 @@ const HomeScreen = () => {
           Navigation SDK Version: {sdkVersion || 'Loading...'}
         </Text>
       </View>
-      {/* Spacer */}
       <View style={CommonStyles.buttonContainer}>
         <ExampleAppButton
           title="Navigation"
@@ -96,7 +95,6 @@ const HomeScreen = () => {
           onPress={() => isFocused && navigate('Map ID')}
         />
       </View>
-      {/* Spacer */}
       <View style={CommonStyles.container} />
       <View style={CommonStyles.buttonContainer}>
         <ExampleAppButton

example/src/controls/Accordion.tsx

@@ -0,0 +1,95 @@
+/**
+ * Copyright 2026 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, { useState, type ReactNode } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  LayoutAnimation,
+} from 'react-native';
+import { Colors, Spacing, BorderRadius, Typography } from '../styles/theme';
+
+type AccordionProps = {
+  title: string;
+  children: ReactNode;
+  defaultExpanded?: boolean;
+};
+
+export const Accordion = ({
+  title,
+  children,
+  defaultExpanded = false,
+}: AccordionProps) => {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  const toggleExpanded = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setExpanded(!expanded);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={styles.header}
+        onPress={toggleExpanded}
+        activeOpacity={0.7}
+      >
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.chevron}>{expanded ? '▲' : '▼'}</Text>
+      </TouchableOpacity>
+      {expanded && <View style={styles.content}>{children}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: Spacing.xs,
+    marginRight: Spacing.md,
+    borderRadius: BorderRadius.md,
+    backgroundColor: Colors.surface,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: Colors.borderLight,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: Spacing.md,
+    paddingHorizontal: Spacing.lg,
+    backgroundColor: Colors.surfaceVariant,
+  },
+  title: {
+    fontSize: Typography.fontSize.md,
+    fontWeight: Typography.fontWeight.semibold,
+    color: Colors.text,
+    flex: 1,
+  },
+  chevron: {
+    fontSize: Typography.fontSize.sm,
+    color: Colors.textSecondary,
+    marginLeft: Spacing.sm,
+  },
+  content: {
+    paddingVertical: Spacing.sm,
+    paddingHorizontal: Spacing.xs,
+  },
+});
+
+export default Accordion;