Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ Note that we generally do not accept PRs that bump versions of native dependenci

All modules should adhere to the style guides which can be found here:

- [Creating Unimodules](guides/Creating%20Unimodules.md)
- [Expo Module Infrastructure](guides/Expo%20Module%20Infrastructure.md)
- [Expo JS Style Guide](guides/Expo%20JavaScript%20Style%20Guide.md) (also mostly applies to TypeScript)
- [Updating Changelogs](guides/contributing/Updating%20Changelogs.md)

Expand Down Expand Up @@ -198,7 +198,7 @@ To keep CI green, please make sure of the following:

### If you edited the docs directory:

- Any change to the current SDK version should also be in the unversioned copy as well. Example:
- Any changes to docs for the current SDK version should also be applied to the unversioned copy. The current docs SDK version is defined in [`docs/package.json`](./docs/package.json), and the versioning workflow is described in [docs/README.md](./docs/README.md#update-latest-version-of-api-reference-docs). Example:
- You fixed a typo in `docs/pages/versions/vXX.0.0/sdk/app-auth.md`
- Ensure you copy that change to: `docs/pages/versions/unversioned/sdk/app-auth.md`
- You don't need to run the docs tests locally. Just ensure the links you include aren't broken, the format is correct, and the changes are following our [writing style guide](/guides/Expo%20Documentation%20Writing%20Style%20Guide.md).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`BottomSheet`](../universal/bottomsheet) — it renders the appropriate native component per platform.

Expo UI ModalBottomSheet matches the official Jetpack Compose [Bottom Sheet API](https://developer.android.com/develop/ui/compose/components/bottom-sheets) and displays content in a modal sheet that slides up from the bottom.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Button`](../universal/button) — it renders the appropriate native component per platform.

Expo UI provides five button components that match the official Jetpack Compose [Button API](https://developer.android.com/develop/ui/compose/components/button): `Button` (filled), `FilledTonalButton`, `OutlinedButton`, `ElevatedButton`, and `TextButton`. All variants share the same props and accept composable children for content.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Checkbox`](../universal/checkbox) — it renders the appropriate native component per platform.

Expo UI Checkbox matches the official Jetpack Compose [Checkbox](https://developer.android.com/develop/ui/compose/components/checkbox) API.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Column`](../universal/column) — it renders the appropriate native component per platform.

Expo UI Column matches the official Jetpack Compose [Column](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#Column) API and places children vertically with configurable arrangement and alignment.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For a cross-platform picker, see [`Picker`](../universal/picker) — built on top of `ExposedDropdownMenuBox` on Android.

Expo UI `ExposedDropdownMenuBox` matches the official Jetpack Compose [`ExposedDropdownMenuBox`](https://kotlinlang.org/api/compose-multiplatform/material3/androidx.compose.material3/-exposed-dropdown-menu-box.html). Use the `menuAnchor()` modifier on the anchor content (typically a read-only `TextField`) and `ExposedDropdownMenu` to wrap `DropdownMenuItem` children.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ platforms: ['android', 'expo-go']
import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';

> **info** For cross-platform usage, see the universal [`Host`](../universal/host) — it renders the appropriate native component per platform.

The `Host` component is the bridge between React Native and Jetpack Compose. Every Jetpack Compose component from `@expo/ui/jetpack-compose` must be wrapped in a `Host` to render correctly.

## Installation
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Icon`](../universal/icon) — it renders the appropriate native component per platform.

An icon component for rendering icons in Jetpack Compose. We recommend downloading icons as XML vector drawables from [Material Symbols](https://fonts.google.com/icons), which is the standard approach for Android development.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For a cross-platform list with pull-to-refresh, see [`List`](../universal/list) — built on top of `PullToRefreshBox` on Android.

Expo UI PullToRefreshBox matches the official Jetpack Compose [PullToRefreshBox](<https://developer.android.com/reference/kotlin/androidx/compose/material3/pulltorefresh/package-summary#PullToRefreshBox(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.pulltorefresh.PullToRefreshState,androidx.compose.ui.Alignment,kotlin.Function1,kotlin.Function1)>) API. It wraps scrollable content and shows a refresh indicator when pulled.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Row`](../universal/row) — it renders the appropriate native component per platform.

Expo UI Row matches the official Jetpack Compose [Row](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#Row) API and places children horizontally with configurable arrangement and alignment.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Slider`](../universal/slider) — it renders the appropriate native component per platform.

Expo UI Slider matches the official Jetpack Compose [Slider API](https://developer.android.com/develop/ui/compose/components/slider) and allows selecting values from a bounded range.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Spacer`](../universal/spacer) — it renders the appropriate native component per platform.

Expo UI Spacer matches the official Jetpack Compose [Spacer](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#Spacer) API and is used to add flexible or fixed-size space between elements in a layout.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Switch`](../universal/switch) — it renders the appropriate native component per platform.

Expo UI Switch matches the official Jetpack Compose [Switch](https://developer.android.com/develop/ui/compose/components/switch) API.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Text`](../universal/text) — it renders the appropriate native component per platform.

Expo UI Text matches the official Jetpack Compose [Text styling](https://developer.android.com/develop/ui/compose/text/style-text) API and displays text with Material 3 typography styles, custom fonts, and text formatting options.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`TextInput`](../universal/textinput) — it renders the appropriate native component per platform.

Expo UI provides two text field components that match the official Jetpack Compose [TextField API](https://developer.android.com/develop/ui/compose/text/user-input): `TextField` (filled) and `OutlinedTextField` (outlined border). Both variants share the same props and support composable slot children for label, placeholder, icons, prefix, suffix, and supporting text.

| Type | Appearance | Purpose |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`BottomSheet`](../universal/bottomsheet) — it renders the appropriate native component per platform.

Expo UI BottomSheet matches the official SwiftUI [sheet API](<https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:)>) and presents content from the bottom of the screen.

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/button.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Button`](../universal/button) — it renders the appropriate native component per platform.

Expo UI Button matches the official SwiftUI [Button API](https://developer.apple.com/documentation/swiftui/button) and supports styling via the [`buttonStyle`](modifiers/#buttonstylestyle), [`controlSize`](modifiers/#controlsizesize), and other modifiers.

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/host.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ platforms: ['ios', 'tvos', 'expo-go']
import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';

> **info** For cross-platform usage, see the universal [`Host`](../universal/host) — it renders the appropriate native component per platform.

A component that allows you to put the other `@expo/ui/swift-ui` components in React Native. It acts like [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg) for DOM, [`<Canvas>`](https://shopify.github.io/react-native-skia/docs/canvas/overview/) for [`react-native-skia`](https://shopify.github.io/react-native-skia/), which underlying uses [`UIHostingController`](https://developer.apple.com/documentation/swiftui/uihostingcontroller) to render the SwiftUI views in UIKit.

Since the `Host` component is a React Native [`View`](https://reactnative.dev/docs/view), you can pass the [`style`](https://reactnative.dev/docs/style) prop to it or `matchContents` prop to make the `Host` component match the contents' size.
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/hstack.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Row`](../universal/row) — it renders the appropriate native component per platform.

Expo UI HStack matches the official SwiftUI [HStack API](https://developer.apple.com/documentation/swiftui/hstack) and arranges its children horizontally.

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/image.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Icon`](../universal/icon) — it renders the appropriate native component per platform.

Expo UI Image displays SF Symbols using the SwiftUI [Image API](https://developer.apple.com/documentation/swiftui/image). SF Symbols are a library of configurable symbols provided by Apple.

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/list.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`List`](../universal/list) — it renders the appropriate native component per platform.

Expo UI List matches the official SwiftUI [List API](https://developer.apple.com/documentation/swiftui/list) and supports styling via the [`listStyle`](modifiers/#liststylestyle) modifier, various row/section modifiers, as well as selection, reordering, and editing capabilities.

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/picker.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Picker`](../universal/picker) — it renders the appropriate native component per platform.

Expo UI Picker matches the official SwiftUI [Picker API](https://developer.apple.com/documentation/swiftui/picker) and supports all picker styles via the [`pickerStyle`](modifiers/#pickerstylestyle) modifier.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ platforms: ['ios', 'tvos', 'expo-go']
import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';

> **info** For cross-platform usage, see the universal [`ScrollView`](../universal/scrollview) — it renders the appropriate native component per platform.

Expo UI ScrollView matches the official SwiftUI [ScrollView API](https://developer.apple.com/documentation/swiftui/scrollview) and provides a scrollable container for its children.

## Installation
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/slider.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Slider`](../universal/slider) — it renders the appropriate native component per platform.

Expo UI Slider matches the official SwiftUI [Slider API](https://developer.apple.com/documentation/swiftui/slider) and allows selecting values from a bounded range.

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/spacer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Spacer`](../universal/spacer) — it renders the appropriate native component per platform.

Expo UI Spacer matches the official SwiftUI [Spacer API](https://developer.apple.com/documentation/swiftui/spacer) and expands to fill available space in a stack.

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/text.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Text`](../universal/text) — it renders the appropriate native component per platform.

Expo UI Text matches the official SwiftUI [Text API](https://developer.apple.com/documentation/swiftui/text).

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/textfield.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`TextInput`](../universal/textinput) — it renders the appropriate native component per platform.

Expo UI TextField matches the official SwiftUI [TextField API](https://developer.apple.com/documentation/swiftui/textfield) and supports single-line and multiline input, keyboard configuration, submit handling, and an imperative `ref` for programmatic control.

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/toggle.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Switch`](../universal/switch) — it renders the appropriate native component per platform.

Expo UI Toggle matches the official SwiftUI [Toggle API](https://developer.apple.com/documentation/swiftui/toggle) and supports styling via the [`toggleStyle`](modifiers/#togglestylestyle) modifier.

<ComponentDiagram
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/versions/unversioned/sdk/ui/swift-ui/vstack.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`Column`](../universal/column) — it renders the appropriate native component per platform.

Expo UI VStack matches the official SwiftUI [VStack API](https://developer.apple.com/documentation/swiftui/vstack) and arranges its children vertically.

<ComponentDiagram
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { ComponentDiagram } from '~/ui/components/Diagram';

> **info** For cross-platform usage, see the universal [`BottomSheet`](../universal/bottomsheet) — it renders the appropriate native component per platform.

Expo UI ModalBottomSheet matches the official Jetpack Compose [Bottom Sheet API](https://developer.android.com/develop/ui/compose/components/bottom-sheets) and displays content in a modal sheet that slides up from the bottom.

<ComponentDiagram
Expand Down
Loading
Loading