[pull] main from expo:main

changelogVersions.json

@@ -1,4 +1,93 @@
 {
+  "55.0.0": {
+    "@unimodules/core": "7.1.1",
+    "@unimodules/react-native-adapter": "6.3.0",
+    "eslint-config-universe": null,
+    "expo-ads-admob": "13.0.0",
+    "expo-ads-facebook": "11.2.0",
+    "expo-analytics-amplitude": "11.2.0",
+    "expo-analytics-segment": "11.2.0",
+    "expo-app-auth": "11.1.0",
+    "expo-apple-authentication": "7.2.3",
+    "expo-application": "7.0.6",
+    "expo-asset": "55.0.7",
+    "expo-auth-session": "55.0.6",
+    "expo-av": "16.0.6",
+    "expo-background-fetch": "14.0.6",
+    "expo-barcode-scanner": "13.0.1",
+    "expo-battery": "10.0.6",
+    "expo-blur": "55.0.8",
+    "expo-branch": "6.2.0",
+    "expo-brightness": "55.0.8",
+    "expo-calendar": "55.0.8",
+    "expo-camera": "55.0.8",
+    "expo-cellular": "55.0.8",
+    "expo-constants": "55.0.7",
+    "expo-contacts": "55.0.8",
+    "expo-crypto": "55.0.8",
+    "expo-dev-client": null,
+    "expo-dev-launcher": null,
+    "expo-dev-menu": null,
+    "expo-dev-menu-interface": null,
+    "expo-device": "55.0.9",
+    "expo-document-picker": "14.0.6",
+    "expo-error-recovery": "4.1.1",
+    "expo-face-detector": "13.0.1",
+    "expo-facebook": "12.2.0",
+    "expo-file-system": "55.0.9",
+    "expo-firebase-analytics": "8.0.0",
+    "expo-firebase-core": "6.0.0",
+    "expo-font": "55.0.4",
+    "expo-gl": "55.0.9",
+    "expo-google-app-auth": "8.3.0",
+    "expo-google-sign-in": "10.2.0",
+    "expo-haptics": "55.0.8",
+    "expo-image-loader": "55.0.0",
+    "expo-image-manipulator": "55.0.9",
+    "expo-image-picker": "55.0.9",
+    "expo-in-app-purchases": null,
+    "expo-intent-launcher": "55.0.8",
+    "expo-keep-awake": "55.0.4",
+    "expo-linear-gradient": "14.1.3",
+    "expo-linking": "8.0.7",
+    "expo-local-authentication": "17.0.6",
+    "expo-localization": "55.0.8",
+    "expo-location": "55.1.2",
+    "expo-mail-composer": "55.0.8",
+    "expo-media-library": "55.0.9",
+    "expo-module-template": null,
+    "expo-network": "55.0.8",
+    "expo-notifications": "55.0.10",
+    "expo-payments-stripe": "10.0.0",
+    "expo-permissions": "14.2.0",
+    "expo-print": "15.0.6",
+    "expo-random": "14.0.1",
+    "expo-screen-capture": "55.0.8",
+    "expo-screen-orientation": "55.0.8",
+    "expo-secure-store": "55.0.8",
+    "expo-sensors": "55.0.8",
+    "expo-sharing": "55.0.10",
+    "expo-sms": "55.0.8",
+    "expo-speech": "55.0.8",
+    "expo-sqlite": "55.0.9",
+    "expo-store-review": "55.0.8",
+    "expo-task-manager": "55.0.9",
+    "expo-video-thumbnails": "55.0.9",
+    "expo-web-browser": "55.0.9",
+    "unimodules-app-loader": "6.0.6",
+    "unimodules-barcode-scanner-interface": "6.1.0",
+    "unimodules-camera-interface": "6.1.0",
+    "unimodules-constants-interface": "6.1.0",
+    "unimodules-face-detector-interface": "6.1.0",
+    "unimodules-file-system-interface": "6.1.0",
+    "unimodules-font-interface": "6.1.0",
+    "unimodules-image-loader-interface": "6.1.0",
+    "unimodules-permissions-interface": "6.1.0",
+    "unimodules-sensors-interface": "6.1.0",
+    "unimodules-task-manager-interface": "7.0.1",
+    "expo-clipboard": "55.0.8",
+    "expo-modules-core": "55.0.11"
+  },
   "54.0.0": {
     "@unimodules/core": "7.1.1",
     "@unimodules/react-native-adapter": "6.3.0",

docs/pages/guides/expo-ui-swift-ui/index.mdx

@@ -195,7 +195,7 @@ Combining the Expo UI components and modifiers, you can build a UI like iOS Sett
       Toggle,
       Text,
     } from '@expo/ui/swift-ui';
-    import { background, clipShape, frame } from '@expo/ui/swift-ui/modifiers';
+    import { background, buttonStyle, foregroundStyle, clipShape, frame } from '@expo/ui/swift-ui/modifiers';
     import { Link } from 'expo-router';
     import { useState } from 'react';
 
@@ -223,7 +223,8 @@ Combining the Expo UI components and modifiers, you can build a UI like iOS Sett
               </HStack>
 
               <Link href="/wifi" asChild>
-                <Button>
+                {/* Use buttonStyle('plain') to prevent default blue button styling */}
+                <Button modifiers={[buttonStyle('plain')]}>
                   <HStack spacing={8}>
                     <Image
                       systemName="wifi"
@@ -235,7 +236,8 @@ Combining the Expo UI components and modifiers, you can build a UI like iOS Sett
                         clipShape('roundedRectangle'),
                       ]}
                     />
-                    <Text color="primary">Wi-Fi</Text>
+                    {/* When Text is wrapped in a Link, the color needs to be specified explicitly */}
+                    <Text modifiers={[foregroundStyle({type: 'color', color: 'black'})]}>Wi-Fi</Text>
                     <Spacer />
                     <Image systemName="chevron.right" size={14} color="secondary" />
                   </HStack>
@@ -259,6 +261,204 @@ Combining the Expo UI components and modifiers, you can build a UI like iOS Sett
   </Tab>
 </Tabs>
 
+### Secondary text styling
+
+Use `foregroundStyle` to apply a [hierarchical style](/versions/v55.0.0/sdk/ui/swift-ui/modifiers/#foregroundstylestyle), which will make text appear lighter and more subtle.
+
+<Tabs>
+  <Tab label="Code">
+    ```tsx Secondary text styling
+    import { Button, Form, Host, HStack, Image, List, Section, Spacer, Text } from '@expo/ui/swift-ui';
+    import { buttonStyle, font, foregroundStyle, padding } from '@expo/ui/swift-ui/modifiers';
+
+    export default function SecondaryTextExample() {
+      return (
+        <Host style={{ flex: 1 }}>
+          <Form>
+            <Section>
+              <List>
+                <Button onPress={() => console.log('Navigate')} modifiers={[buttonStyle('plain')]}>
+                  <HStack>
+                    <Text>Night Shift</Text>
+                    <Spacer />
+                    <Text
+                      modifiers={[
+                        foregroundStyle({type: 'hierarchical', style: 'secondary'}),
+                        padding({ trailing: 8 }),
+                      ]}>
+                      22:00 to 07:00
+                    </Text>
+                    <Image systemName="chevron.right" size={14} color="#C7C7CC" />
+                  </HStack>
+                </Button>
+              </List>
+              <List>
+                <Text modifiers={[foregroundStyle({type: 'hierarchical', style: 'secondary'}), font({ size: 14 })]}>
+                  Save up to 280.7 MB. This will permanently delete all photos and videos kept in the
+                  "Recently Deleted" album.
+                </Text>
+              </List>
+            </Section>
+          </Form>
+        </Host>
+      );
+    }
+    ```
+
+  </Tab>
+  <Tab label="Preview">
+    <ContentSpotlight
+      alt="Secondary text styling"
+      src="/static/images/expo-ui/swift-ui-guide/secondary-text.png"
+      className="max-w-[480px]"
+    />
+  </Tab>
+</Tabs>
+
+### Slider with icons
+
+A common pattern for brightness or volume controls is to flank a `Slider` with icons.
+
+<Tabs>
+  <Tab label="Code">
+    ```tsx Slider with icons
+    import { useState } from 'react';
+    import {
+      Form,
+      Host,
+      HStack,
+      Image,
+      List,
+      Section,
+      Slider,
+      Spacer,
+      Text,
+      Toggle,
+    } from '@expo/ui/swift-ui';
+    import { padding } from '@expo/ui/swift-ui/modifiers';
+
+    export default function SliderWithIconsExample() {
+      const [brightness, setBrightness] = useState(0.5);
+      const [trueToneEnabled, setTrueToneEnabled] = useState(true);
+
+      return (
+        <Host style={{ flex: 1 }}>
+          <Form>
+            <Section
+              header={<Text>Brightness</Text>}
+              footer={
+                <Text>
+                  Automatically adapt iPhone display based on ambient lighting
+                  conditions to make colors appear consistent in different
+                  environments.
+                </Text>
+              }
+            >
+              <List>
+                <HStack modifiers={[padding({ vertical: 6 })]}>
+                  <Image systemName="sun.min.fill" size={22} color="#8E8E93" />
+                  <Spacer />
+                  <Slider value={brightness} onValueChange={setBrightness} />
+                  <Spacer />
+                  <Image systemName="sun.max.fill" size={22} color="#8E8E93" />
+                </HStack>
+                <Toggle
+                  label="True Tone"
+                  isOn={trueToneEnabled}
+                  onIsOnChange={setTrueToneEnabled}
+                />
+              </List>
+            </Section>
+          </Form>
+        </Host>
+      );
+    }
+    ```
+
+  </Tab>
+  <Tab label="Preview">
+    <ContentSpotlight
+      alt="Slider with icons"
+      src="/static/images/expo-ui/swift-ui-guide/slider-with-icons.png"
+      className="max-w-[480px]"
+    />
+  </Tab>
+</Tabs>
+
+### Multi-line list items
+
+Use `VStack` with `alignment="leading"` for list items with title and subtitle.
+
+<Tabs>
+  <Tab label="Code">
+    ```tsx Multi-line list item
+    import {
+      Button,
+      Form,
+      Host,
+      HStack,
+      Image,
+      List,
+      Section,
+      Spacer,
+      Text,
+      VStack,
+    } from '@expo/ui/swift-ui';
+    import { buttonStyle, font, foregroundStyle, padding } from '@expo/ui/swift-ui/modifiers';
+
+    export default function MultiLineListItemExample() {
+      return (
+        <Host style={{ flex: 1 }}>
+          <Form>
+            <Section>
+              <List>
+                <HStack>
+                  <Image
+                    systemName="safari"
+                    size={22}
+                    modifiers={[padding({ trailing: 6 })]}
+                  />
+                  <Spacer />
+                  <Button
+                    onPress={() => console.log('Navigate')}
+                    modifiers={[buttonStyle('plain'), padding({ vertical: 6 })]}
+                  >
+                    <VStack spacing={4} alignment="leading">
+                      <Text>Chrome</Text>
+                      <Text modifiers={[foregroundStyle({type: 'hierarchical', style: 'secondary'}), font({ size: 14 })]}>
+                        Last used: Today
+                      </Text>
+                    </VStack>
+                    <Spacer />
+                    <Text
+                      modifiers={[
+                        foregroundStyle({type: 'hierarchical', style: 'secondary'}),
+                        font({ size: 16 }),
+                      ]}
+                    >
+                      1.57 GB
+                    </Text>
+                    <Image systemName="chevron.right" size={14} color="#C7C7CC" />
+                  </Button>
+                </HStack>
+              </List>
+            </Section>
+          </Form>
+        </Host>
+      );
+    }
+    ```
+
+  </Tab>
+  <Tab label="Preview">
+    <ContentSpotlight
+      alt="Multi-line list item"
+      src="/static/images/expo-ui/swift-ui-guide/multi-line-list-item.png"
+      className="max-w-[480px]"
+    />
+  </Tab>
+</Tabs>
+
 ## Common questions
 
 <Collapsible summary="Can I use flexbox or other styles in SwiftUI components?">