diff --git a/apps/native-component-list/src/screens/UI/ConfirmationDialogScreen.ios.tsx b/apps/native-component-list/src/screens/UI/ConfirmationDialogScreen.ios.tsx new file mode 100644 index 00000000000000..b228c7a46b1a70 --- /dev/null +++ b/apps/native-component-list/src/screens/UI/ConfirmationDialogScreen.ios.tsx @@ -0,0 +1,135 @@ +import { Button, ConfirmationDialog, Form, Host, Section, Text } from '@expo/ui/swift-ui'; +import { foregroundStyle } from '@expo/ui/swift-ui/modifiers'; +import React, { useState } from 'react'; + +export default function ConfirmationDialogScreen() { + const [showBasic, setShowBasic] = useState(false); + const [showDestructive, setShowDestructive] = useState(false); + const [showWithMessage, setShowWithMessage] = useState(false); + const [showHiddenTitle, setShowHiddenTitle] = useState(false); + const [lastAction, setLastAction] = useState('None'); + + return ( + +
+
+ {lastAction} +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ ); +} + +ConfirmationDialogScreen.navigationOptions = { + title: 'ConfirmationDialog', +}; diff --git a/apps/native-component-list/src/screens/UI/UIScreen.ios.tsx b/apps/native-component-list/src/screens/UI/UIScreen.ios.tsx index 39894553d7166a..398e296722c8cb 100644 --- a/apps/native-component-list/src/screens/UI/UIScreen.ios.tsx +++ b/apps/native-component-list/src/screens/UI/UIScreen.ios.tsx @@ -74,6 +74,14 @@ export const UIScreens = [ return optionalRequire(() => require('./MenuScreen')); }, }, + { + name: 'ConfirmationDialog component', + route: 'ui/confirmation-dialog', + options: {}, + getComponent() { + return optionalRequire(() => require('./ConfirmationDialogScreen')); + }, + }, { name: 'ContextMenu component', route: 'ui/context-menu', diff --git a/docs/pages/versions/unversioned/sdk/ui/swift-ui/confirmationdialog.mdx b/docs/pages/versions/unversioned/sdk/ui/swift-ui/confirmationdialog.mdx new file mode 100644 index 00000000000000..b74a69cd3e17eb --- /dev/null +++ b/docs/pages/versions/unversioned/sdk/ui/swift-ui/confirmationdialog.mdx @@ -0,0 +1,167 @@ +--- +title: ConfirmationDialog +description: A SwiftUI ConfirmationDialog component for presenting confirmation prompts. +sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-ui' +packageName: '@expo/ui' +platforms: ['ios', 'tvos'] +--- + +import APISection from '~/components/plugins/APISection'; +import { APIInstallSection } from '~/components/plugins/InstallSection'; + +Expo UI ConfirmationDialog matches the official SwiftUI [confirmationDialog API]() and presents an action sheet-style dialog with a title, actions, and an optional message. + +## Installation + + + +## Usage + +### Basic confirmation dialog + +Use `ConfirmationDialog.Trigger` to define the visible element and `ConfirmationDialog.Actions` to provide the dialog buttons. + +```tsx BasicConfirmationDialogExample.tsx +import { useState } from 'react'; +import { Host, ConfirmationDialog, Button, Text } from '@expo/ui/swift-ui'; + +export default function BasicConfirmationDialogExample() { + const [isPresented, setIsPresented] = useState(false); + + return ( + + + +