Expo Audio

https://docs.expo.dev/versions/latest/sdk/
Admin
Expo Audio is a cross-platform library that provides APIs for audio playback and recording...
Tokens:648,823
Snippets:5,465
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install @expo/ui with Bun

Source: https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/flowrow

Installs the @expo/ui package using Bun.

```sh
bun expo install @expo/ui
```

--------------------------------

### Install expo-media-library

Source: https://docs.expo.dev/versions/latest/sdk/media-library

Install the expo-media-library package using npm, yarn, pnpm, or bun.

```bash
# npm
npx expo install expo-media-library

# yarn
yarn expo install expo-media-library

# pnpm
pnpm expo install expo-media-library

# bun
bun expo install expo-media-library
```

--------------------------------

### Install expo-system-ui

Source: https://docs.expo.dev/versions/latest/sdk/system-ui

Install the expo-system-ui package using npm, yarn, pnpm, or bun.

```sh
# npm
npx expo install expo-system-ui

# yarn
yarn expo install expo-system-ui

# pnpm
pnpm expo install expo-system-ui

# bun
bun expo install expo-system-ui
```

--------------------------------

### Install react-native-screens with bun

Source: https://docs.expo.dev/versions/latest/sdk/screens

Install the library using bun in an Expo project.

```sh
bun expo install react-native-screens
```

--------------------------------

### Install expo-document-picker

Source: https://docs.expo.dev/versions/latest/sdk/document-picker

Install the package in your project using your preferred package manager.

```bash
# npm
npx expo install expo-document-picker

# yarn
yarn expo install expo-document-picker

# pnpm
pnpm expo install expo-document-picker

# bun
bun expo install expo-document-picker
```

--------------------------------

### Install @expo/ui with pnpm

Source: https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/flowrow

Installs the @expo/ui package using pnpm.

```sh
pnpm expo install @expo/ui
```

--------------------------------

### Install @expo/ui with Yarn

Source: https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/flowrow

Installs the @expo/ui package using Yarn.

```sh
yarn expo install @expo/ui
```

--------------------------------

### Install expo-clipboard

Source: https://docs.expo.dev/versions/latest/sdk/clipboard

Install the expo-clipboard package in your project using your preferred package manager.

```shell
# npm
npx expo install expo-clipboard

# yarn
yarn expo install expo-clipboard

# pnpm
pnpm expo install expo-clipboard

# bun
bun expo install expo-clipboard
```

--------------------------------

### Install react-native-screens with npm

Source: https://docs.expo.dev/versions/latest/sdk/screens

Install the library using npm in an Expo project.

```sh
npx expo install react-native-screens
```

--------------------------------

### Install react-native-keyboard-controller

Source: https://docs.expo.dev/versions/latest/sdk/keyboard-controller

Install the package using the preferred package manager with the Expo CLI.

```bash
# npm
npx expo install react-native-keyboard-controller

# yarn
yarn expo install react-native-keyboard-controller

# pnpm
pnpm expo install react-native-keyboard-controller

# bun
bun expo install react-native-keyboard-controller
```

--------------------------------

### Install expo-intent-launcher

Source: https://docs.expo.dev/versions/latest/sdk/intent-launcher

Install the expo-intent-launcher package using the preferred package manager.

```sh
# npm
npx expo install expo-intent-launcher

# yarn
yarn expo install expo-intent-launcher

# pnpm
pnpm expo install expo-intent-launcher

# bun
bun expo install expo-intent-launcher
```

--------------------------------

### Install expo-dev-menu

Source: https://docs.expo.dev/versions/latest/sdk/dev-menu

Installs the expo-dev-menu package using npm, yarn, pnpm, or bun.

```sh
# npm
npx expo install expo-dev-menu

# yarn
yarn expo install expo-dev-menu

# pnpm
pnpm expo install expo-dev-menu

# bun
bun expo install expo-dev-menu
```

--------------------------------

### Install expo-file-system

Source: https://docs.expo.dev/versions/latest/sdk/filesystem-legacy

Installs the expo-file-system package in your project using various package managers.

```sh
# npm
npx expo install expo-file-system

# yarn
yarn expo install expo-file-system

# pnpm
pnpm expo install expo-file-system

# bun
bun expo install expo-file-system
```

--------------------------------

### Create project from with-splash-screen example

Source: https://docs.expo.dev/versions/latest/sdk/splash-screen

Initialize a new project using the preconfigured with-splash-screen template.

```sh
# npm
npx create-expo-app --example with-splash-screen

# yarn
yarn create expo-app --example with-splash-screen

# pnpm
pnpm create expo-app --example with-splash-screen

# bun
bun create expo --example with-splash-screen
```

--------------------------------

### Application.getInstallReferrerAsync()

Source: https://docs.expo.dev/versions/latest/sdk/application

Gets the referrer URL of the installed app via the Google Play Store Install Referrer API.

```APIDOC
## Application.getInstallReferrerAsync()

### Description
Gets the referrer URL of the installed app with the Install Referrer API from the Google Play Store.

### Supported Platforms
- Android

### Return Value
- **Promise<string>**: A `Promise` that fulfills with the referrer URL string.

### Code Example
```ts
await Application.getInstallReferrerAsync();
// "utm_source=google-play&utm_medium=organic"
```
```

--------------------------------

### Create a project with with-sqlite example template

Source: https://docs.expo.dev/versions/latest/sdk/sqlite

Initialize a new Expo project using the with-sqlite example template, which includes expo-sqlite pre-installed and pre-configured.

```sh
# npm
npx create-expo-app --example with-sqlite

# yarn
yarn create expo-app --example with-sqlite

# pnpm
pnpm create expo-app --example with-sqlite

# bun
bun create expo --example with-sqlite
```

--------------------------------

### Install @react-native-async-storage/async-storage

Source: https://docs.expo.dev/versions/latest/sdk/async-storage

Install the package in an Expo project using npm, yarn, pnpm, or bun. For bare React Native apps, ensure expo is installed before following the library's setup instructions.

```sh
# npm
npx expo install @react-native-async-storage/async-storage

# yarn
yarn expo install @react-native-async-storage/async-storage

# pnpm
pnpm expo install @react-native-async-storage/async-storage

# bun
bun expo install @react-native-async-storage/async-storage
```

--------------------------------

### Application.getInstallationTimeAsync()

Source: https://docs.expo.dev/versions/latest/sdk/application

Gets the date and time when the app was installed onto the device.

```APIDOC
## Application.getInstallationTimeAsync()

### Description
Gets the time the app was installed onto the device, not counting subsequent updates. If the app is uninstalled and reinstalled, this method returns the time the app was reinstalled.

### Supported Platforms
- Android
- iOS
- tvOS
- Web

### Return Value
- **Promise<Date>**: A `Promise` that fulfills with a `Date` object specifying the installation timestamp (returns `null` on Web).

### Code Example
```ts
await Application.getInstallationTimeAsync();
// 2019-07-18T18:08:26.121Z
```
```

--------------------------------

### Install expo-media-library

Source: https://docs.expo.dev/versions/latest/sdk/media-library-legacy

Run the install command using your preferred package manager to add expo-media-library to your project.

```sh
# npm
npx expo install expo-media-library

# yarn
yarn expo install expo-media-library

# pnpm
pnpm expo install expo-media-library

# bun
bun expo install expo-media-library
```

--------------------------------

### Get Play Store referrer with Application.getInstallReferrerAsync()

Source: https://docs.expo.dev/versions/latest/sdk/application

Fetches the referrer URL of the installed application using Google Play's Install Referrer API. Supported only on Android.

```typescript
await Application.getInstallReferrerAsync();
// "utm_source=google-play&utm_medium=organic"
```

--------------------------------

### Icon source prop examples

Source: https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/icon

Shows how to set the source using require() or a URI string.

```tsx
<Icon source={require('./assets/home.xml')} />
<Icon source={{ uri: 'file:///path/to/icon.xml' }} />
```

--------------------------------

### Get installation timestamp with Application.getInstallationTimeAsync()

Source: https://docs.expo.dev/versions/latest/sdk/application

Retrieves the time the app was originally installed or reinstalled onto the device. Resolves to a Date object on Android, iOS, and tvOS, and returns null on web.

```typescript
await Application.getInstallationTimeAsync();
// 2019-07-18T18:08:26.121Z
```

--------------------------------

### Create project from with-maps example template

Source: https://docs.expo.dev/versions/latest/sdk/maps

Bootstrap a new Expo project pre-configured with expo-maps using create-expo-app.

```sh
# npm
npx create-expo-app --example with-maps

# yarn
yarn create expo-app --example with-maps

# pnpm
pnpm create expo-app --example with-maps

# bun
bun create expo --example with-maps
```

--------------------------------

### Install @shopify/flash-list

Source: https://docs.expo.dev/versions/latest/sdk/flash-list

Install the package using the Expo CLI with your preferred package manager. For existing React Native apps, ensure Expo modules are configured before following the library setup.

```sh
# npm
npx expo install @shopify/flash-list

# yarn
yarn expo install @shopify/flash-list

# pnpm
pnpm expo install @shopify/flash-list

# bun
bun expo install @shopify/flash-list
```

--------------------------------

### Configure Stack.Toolbar.Menu with icon, label, and menu actions

Source: https://docs.expo.dev/versions/latest/sdk/router/stack

Demonstrates how to build menu content inside a toolbar using icons, labels, and interactive menu actions.

```tsx
<Stack.Toolbar.Menu>
  <Stack.Toolbar.Icon sfSymbol="ellipsis.circle" />
  <Stack.Toolbar.Label>Options</Stack.Toolbar.Label>
  <Stack.Toolbar.MenuAction onPress={() => {}}>Action 1</Stack.Toolbar.MenuAction>
</Stack.Toolbar.Menu>
```

--------------------------------

### Basic DisclosureGroup example

Source: https://docs.expo.dev/versions/latest/sdk/ui/swift-ui/disclosuregroup

Use DisclosureGroup with a label string and controlled isExpanded state. Place inside a Form and Section to get standard iOS list styling and chevron indicator.

```tsx
import { useState } from 'react';
import {
  DisclosureGroup,
  Form,
  Host,
  Section,
  Text,
} from '@expo/ui/swift-ui';

export default function BasicDisclosureGroupExample() {
  const [isExpanded, setIsExpanded] = useState(true);
  return (
    <Host style={{ flex: 1 }}>
      <Form>
        <Section>
          <DisclosureGroup
            label="Advanced settings"
            isExpanded={isExpanded}
            onIsExpandedChange={setIsExpanded}>
            <Text>Auto-update apps</Text>
            <Text>App downloads</Text>
            <Text>Offload unused apps</Text>
          </DisclosureGroup>
        </Section>
      </Form>
    </Host>
  );
}
```

--------------------------------

### Icon tint prop examples

Source: https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/icon

Shows how to apply tint colors, including hex, named colors, and null for no tint.

```tsx
<Icon source={require('./assets/star.xml')} tint="#007AFF" />
<Icon source={require('./assets/star.xml')} tint="blue" />
<Icon source={require('./assets/multicolor.xml')} tint={null} />
```

--------------------------------

### Install @expo/app-integrity

Source: https://docs.expo.dev/versions/latest/sdk/app-integrity

Install the @expo/app-integrity package in your project using your package manager of choice. If installing in an existing React Native app, ensure expo is already installed.

```sh
# npm
npx expo install @expo/app-integrity

# yarn
yarn expo install @expo/app-integrity

# pnpm
pnpm expo install @expo/app-integrity

# bun
bun expo install @expo/app-integrity
```

--------------------------------

### Install expo-manifests package

Source: https://docs.expo.dev/versions/latest/sdk/manifests

Install expo-manifests into your Expo project using your preferred package manager. If installing in an existing React Native app, ensure the expo package is installed first.

```sh
# npm
npx expo install expo-manifests

# yarn
yarn expo install expo-manifests

# pnpm
pnpm expo install expo-manifests

# bun
bun expo install expo-manifests
```

--------------------------------

### AudioRecorder.prepareToRecordAsync(options)

Source: https://docs.expo.dev/versions/latest/sdk/audio

Prepares the recording session with the specified options.

```APIDOC
### `AudioRecorder.prepareToRecordAsync(options)`

Prepares the recording for recording.

**Supported Platforms:** Android, iOS, tvOS, Web

#### Parameters
- `options` (`Partial<RecordingOptions>`) - Optional. Recording options configuration.

#### Returns
- `Promise<void>`
```

--------------------------------

### Install @stripe/stripe-react-native

Source: https://docs.expo.dev/versions/latest/sdk/stripe

Run the install command with your package manager to install the compatible @stripe/stripe-react-native version for your Expo SDK version.

```sh
# npm
npx expo install @stripe/stripe-react-native

# yarn
yarn expo install @stripe/stripe-react-native

# pnpm
pnpm expo install @stripe/stripe-react-native

# bun
bun expo install @stripe/stripe-react-native
```

--------------------------------

### Install expo-gl

Source: https://docs.expo.dev/versions/latest/sdk/gl-view

Run the install command using your package manager of choice to add expo-gl to your project.

```sh
# npm
npx expo install expo-gl

# yarn
yarn expo install expo-gl

# pnpm
pnpm expo install expo-gl

# bun
bun expo install expo-gl
```

--------------------------------

### Install @expo/material-symbols

Source: https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/icon

Optionally install @expo/material-symbols to use the bundled icon assets. No install is needed if you use the CLI for custom styles.

```sh
npx expo install @expo/material-symbols
```

--------------------------------

### create(options)

Source: https://docs.expo.dev/versions/latest/sdk/filesystem

Creates a new file with optional configuration options. Supported on Android, iOS, and tvOS.

```APIDOC
### `create(options)`

**Supported platforms:** Android, iOS, tvOS

Creates a file.

#### Parameters
- **options** (`FileCreateOptions`) - Optional - Options for creating the file.

#### Returns
- `void`
```

--------------------------------

### Install expo-linking

Source: https://docs.expo.dev/versions/latest/sdk/linking

Install expo-linking across different package managers. Ensure expo is installed when using an existing React Native app.

```sh
# npm
npx expo install expo-linking

# yarn
yarn expo install expo-linking

# pnpm
pnpm expo install expo-linking

# bun
bun expo install expo-linking
```

--------------------------------

### Install expo-file-system

Source: https://docs.expo.dev/versions/latest/sdk/filesystem

Install expo-file-system using your package manager of choice. For bare React Native apps, ensure the expo package is installed.

```sh
# npm
npx expo install expo-file-system

# yarn
yarn expo install expo-file-system

# pnpm
pnpm expo install expo-file-system

# bun
bun expo install expo-file-system
```

--------------------------------

### Create a Directory instance

Source: https://docs.expo.dev/versions/latest/sdk/filesystem

Instantiates a new Directory using a base Directory path and a subdirectory name string. The directory does not need to exist on the filesystem when created.

```ts
const directory = new Directory(Paths.cache, "subdirName");
```

--------------------------------

### Install expo-glass-effect package

Source: https://docs.expo.dev/versions/latest/sdk/glass-effect

Install expo-glass-effect using your preferred package manager. For existing React Native apps, ensure the expo package is installed.

```bash
# npm
npx expo install expo-glass-effect

# yarn
yarn expo install expo-glass-effect

# pnpm
pnpm expo install expo-glass-effect

# bun
bun expo install expo-glass-effect
```

--------------------------------

### FileSystem.makeDirectoryAsync(fileUri, options)

Source: https://docs.expo.dev/versions/latest/sdk/filesystem-legacy

Creates a new empty directory at the specified file URI with optional configuration options.

```APIDOC
## FileSystem.makeDirectoryAsync(fileUri, options)

### Description
Create a new empty directory.

### Supported Platforms
- Android
- iOS
- tvOS

### Parameters
- **fileUri** (`string`) - Required - `file://` URI to the new directory to create.
- **options** (`MakeDirectoryOptions`) - Optional - A map of create directory options represented by `MakeDirectoryOptions` type. Default: `{}`

### Returns
`Promise<void>`
```

--------------------------------

### Install expo-device

Source: https://docs.expo.dev/versions/latest/sdk/device

Install the expo-device package using your preferred package manager. For existing React Native apps, ensure expo modules are installed.

```sh
# npm
npx expo install expo-device

# yarn
yarn expo install expo-device

# pnpm
pnpm expo install expo-device

# bun
bun expo install expo-device
```

--------------------------------

### Installing expo-contacts

Source: https://docs.expo.dev/versions/latest/sdk/contacts

Install expo-contacts using your preferred package manager. For existing React Native apps, ensure expo modules are installed first.

```sh
# npm
npx expo install expo-contacts

# yarn
yarn expo install expo-contacts

# pnpm
pnpm expo install expo-contacts

# bun
bun expo install expo-contacts
```

--------------------------------

### Create project from with-camera template

Source: https://docs.expo.dev/versions/latest/sdk/camera

Initializes a new Expo project pre-configured with the expo-camera package.

```sh
# npm
npx create-expo-app --example with-camera

# yarn
yarn create expo-app --example with-camera

# pnpm
pnpm create expo-app --example with-camera

# bun
bun create expo --example with-camera
```

--------------------------------

### Install expo-calendar package

Source: https://docs.expo.dev/versions/latest/sdk/calendar

Install expo-calendar using your preferred package manager. In existing React Native projects, ensure the expo package is installed first.

```bash
# npm
npx expo install expo-calendar

# yarn
yarn expo install expo-calendar

# pnpm
pnpm expo install expo-calendar

# bun
bun expo install expo-calendar
```

--------------------------------

### Install expo-sensors package

Source: https://docs.expo.dev/versions/latest/sdk/barometer

Install expo-sensors using your preferred package manager. For existing React Native projects, ensure the expo package is also installed.

```sh
# npm
npx expo install expo-sensors

# yarn
yarn expo install expo-sensors

# pnpm
pnpm expo install expo-sensors

# bun
bun expo install expo-sensors
```

--------------------------------

### Basic SearchBar example (BasicSearchBarExample.tsx)

Source: https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/searchbar

Renders a SearchBar inside a Host component. The onSearch callback updates the query state with the submitted search text.

```tsx
import { useState } from 'react';
import { Host, SearchBar } from '@expo/ui/jetpack-compose';

export default function BasicSearchBarExample() {
  const [query, setQuery] = useState('');

  return (
    <Host matchContents>
      <SearchBar onSearch={searchText => setQuery(searchText)} />
    </Host>
  );
}
```

--------------------------------

### Create a basic dropdown menu with Jetpack Compose

Source: https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/dropdownmenu

Demonstrates setting up a DropdownMenu with an OutlinedButton trigger, expandable state handling, and menu items containing text and leading icons.

```tsx
import {
  Host,
  DropdownMenu,
  DropdownMenuItem,
  OutlinedButton,
  Text,
  Icon,
} from '@expo/ui/jetpack-compose';
import { useState } from 'react';

const homeIcon = require('./assets/home.xml');

export default function BasicDropdownMenuExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  return (
    <Host matchContents>
      <DropdownMenu
        expanded={isExpanded}
        onDismissRequest={() => setIsExpanded(false)}>
        <DropdownMenu.Trigger>
          <OutlinedButton onClick={() => setIsExpanded(true)}>
            <Text>Show menu</Text>
          </OutlinedButton>
        </DropdownMenu.Trigger>
        <DropdownMenu.Items>
          <DropdownMenuItem
            onClick={() => {
              setIsExpanded(false);
              console.log('Home pressed');
            }}>
            <DropdownMenuItem.Text>
              <Text>Home</Text>
            </DropdownMenuItem.Text>
            <DropdownMenuItem.LeadingIcon>
              <Icon source={homeIcon} size={24} />
            </DropdownMenuItem.LeadingIcon>
          </DropdownMenuItem>
        </DropdownMenu.Items>
      </DropdownMenu>
    </Host>
  );
}
```

--------------------------------

### Install expo-sqlite library

Source: https://docs.expo.dev/versions/latest/sdk/sqlite

Install expo-sqlite using your preferred package manager. If adding to an existing React Native app, ensure the expo package is installed first.

```sh
# npm
npx expo install expo-sqlite

# yarn
yarn expo install expo-sqlite

# pnpm
pnpm expo install expo-sqlite

# bun
bun expo install expo-sqlite
```

--------------------------------

### Install expo-maps library

Source: https://docs.expo.dev/versions/latest/sdk/maps

Install the expo-maps package using your preferred package manager. In bare React Native projects, ensure the expo package is installed first.

```sh
# npm
npx expo install expo-maps

# yarn
yarn expo install expo-maps

# pnpm
pnpm expo install expo-maps

# bun
bun expo install expo-maps
```
Tokens:
Raw