### Installation and Usage

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

Instructions on how to install the Expo UI package and a basic example of using the Column component.

```APIDOC
## Installation

### Terminal
```bash
npx expo install @expo/ui
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.

## Usage Example

### `ColumnExample.tsx`
```typescript
import { Host, Column, Text } from '@expo/ui/jetpack-compose';
import { fillMaxWidth, paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function ColumnExample() {
  return (
    <Host matchContents>
      <Column
        verticalArrangement={{ spacedBy: 8 }}
        horizontalAlignment="center"
        modifiers={[fillMaxWidth(), paddingAll(16)]}>
        <Text>First</Text>
        <Text>Second</Text>
        <Text>Third</Text>
      </Column>
    </Host>
  );
}
```

### Description
The `Column` component places children vertically. Use `verticalArrangement` and `horizontalAlignment` to control spacing and alignment. This example demonstrates a basic usage with spaced items and centered alignment.
```

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

### Install expo-store-review

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

Installs the expo-store-review library using the Expo CLI. Ensure you have Expo installed in your project.

```bash
npx expo install expo-store-review
```

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

### Install expo-file-system

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

Installs the expo-file-system library using the Expo CLI. Ensure you have Expo installed in your project.

```bash
npx expo install expo-file-system
```

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

### Getting App Installation Time

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

Returns a promise that resolves to a Date object representing when the application was installed on the device.

```javascript
await Application.getInstallationTimeAsync();
```

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

### Installation

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

Install the expo-screen-capture library using the Expo CLI.

```APIDOC
## Installation

Terminal
```
npx expo install expo-screen-capture
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Installation

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

Install the expo-sharing library using the Expo CLI.

```APIDOC
## Installation

Terminal
```bash
npx expo install expo-sharing
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Install react-native-webview

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

Installs the react-native-webview library using the Expo CLI. Ensure Expo is installed in your project before proceeding.

```bash
npx expo install react-native-webview
```

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

### Installation

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

Install the expo-media-library package using the Expo CLI.

```APIDOC
## Installation

### Terminal

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

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Installation

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

Install the expo-blob library using the Expo CLI.

```APIDOC
## Installation

Terminal
```
npx expo install expo-blob
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Install expo-document-picker

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

Command to install the expo-document-picker library. Ensure 'expo' is installed if integrating into an existing React Native project.

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

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

### Starting a Live Activity

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

Initiates a Live Activity instance with initial content. The `start` method returns an instance that can be used for subsequent updates or ending the activity.

```APIDOC
## POST /api/live-activities/{activityId}/start

### Description
Starts a Live Activity instance with the provided initial content and an optional deep link URL.

### Method
POST

### Endpoint
/api/live-activities/{activityId}/start

### Parameters
#### Path Parameters
- **activityId** (string) - Required - The unique identifier for the Live Activity.

#### Request Body
- **initialContent** (object) - Required - The initial state of the Live Activity.
- **deepLinkUrl** (string) - Optional - A URL to navigate to when the activity is tapped.

### Request Example
```json
{
  "initialContent": {
    "etaMinutes": 15,
    "status": "Your delivery is on the way"
  },
  "deepLinkUrl": "myapp://deliveries/12345"
}
```

### Response
#### Success Response (200)
- **instanceId** (string) - The ID of the started Live Activity instance.

#### Response Example
```json
{
  "instanceId": "activity-instance-123"
}
```
```

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

### Installation

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

Install the expo-build-properties plugin using the Expo CLI.

```APIDOC
## Installation

Terminal
```bash
npx expo install expo-build-properties
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Button Usage Examples

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

Examples demonstrating various ways to use the Button component.

```APIDOC
### Basic Button Example
```swift
import { Button } from '@expo/ui/swift-ui';

<Button onPress={() => console.log('Pressed!')} label="Click Me" />
```

### Button with System Image
```swift
import { Button } from '@expo/ui/swift-ui';

<Button systemImage="star.fill" onPress={() => console.log('Star pressed!')} />
```

### Icon-only Button
```swift
import { Button } from '@expo/ui/swift-ui';

<Button systemImage="gear" onPress={() => console.log('Settings pressed!')} />
```

### Button Styles and Modifiers
```swift
import { Button } from '@expo/ui/swift-ui';
import { buttonStyle, controlSize, tint, disabled } from '@expo/ui/swift-ui/modifiers';

<Button
  role="destructive"
  onPress={handlePress}
  label="Delete"
  modifiers={[
    buttonStyle('bordered'),
    controlSize('large'),
    tint('#FF0000'),
    disabled(true)
  ]}
/>
```

### Custom Label Content
```swift
import { Host, Button, VStack, Image, Text } from '@expo/ui/swift-ui';

export default function CustomContentExample() {
  return (
    <Host matchContents>
      <Button onPress={() => console.log('Pressed!')}>
        <VStack spacing={4}>
          <Image systemName="folder" />
          <Text>Folder</Text>
        </VStack>
      </Button>
    </Host>
  );
}
```
```

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

### Installation

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

Install the expo-calendar library using the Expo CLI.

```APIDOC
## Installation

Terminal
```
npx expo install expo-calendar
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Installation

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

Install the expo-sqlite library using the Expo CLI.

```APIDOC
## Installation

Terminal
```
npx expo install expo-sqlite
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Get Document Async Example

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

Example of using the getDocumentAsync method to display the system UI for choosing a document. The chosen file is copied to the app's cache directory by default. Note web limitations regarding user activation.

```javascript
const result = await DocumentPicker.getDocumentAsync();

if (result.type === 'success') {
  console.log(result.uri);
} else {
  // User cancelled the picker
}
```

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

### Installation

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

Instructions on how to install the expo-symbols library using npm or yarn.

```APIDOC
## Installation

```bash
npx expo install expo-symbols
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Basic Calendar Usage Example

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

Example demonstrating how to request calendar permissions and fetch calendars.

```APIDOC
## Usage

Basic Calendar usage

Open in Snack

```javascript
import { useEffect } from 'react';
import { StyleSheet, View, Text, Button, Platform } from 'react-native';
import * as Calendar from 'expo-calendar';

export default function App() {
  useEffect(() => {
    (async () => {
      const { status } = await Calendar.requestCalendarPermissionsAsync();
      if (status === 'granted') {
        const calendars = await Calendar.getCalendarsAsync(Calendar.EntityTypes.EVENT);
        console.log('Here are all your calendars:');
        console.log({ calendars });
      }
    })();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Calendar Module Example</Text>
      <Button title="Create a new calendar" onPress={createCalendar} />
    </View>
  );
}

async function getDefaultCalendarSource() {
  const defaultCalendar = await Calendar.getDefaultCalendarAsync();
  return defaultCalendar.source;
}

async function createCalendar() {
  const defaultCalendarSource = 
    Platform.OS === 'ios'
      ? await getDefaultCalendarSource()
      : { isLocalAccount: true, name: 'Expo Calendar' };
  const newCalendarID = await Calendar.createCalendarAsync({
    title: 'Expo Calendar',
    color: 'blue',
    entityType: Calendar.EntityTypes.EVENT,
    sourceId: defaultCalendarSource.id,
    source: defaultCalendarSource,
    name: 'internalCalendarName',
    ownerAccount: 'personal',
    accessLevel: Calendar.CalendarAccessLevel.OWNER,
  });
  console.log(`Your new calendar ID is: ${newCalendarID}`);
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});
```
```

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

### Web Setup

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

Configure Metro bundler and server headers for web support.

```APIDOC
## Web setup

To use `expo-sqlite` on web, you need to configure Metro bundler to support wasm files and add HTTP headers to allow `SharedArrayBuffer` usage.

Add the following configuration to your metro.config.js:
metro.config.js
```javascript
/** @type {import('expo/metro-config').MetroConfig} */
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// Add wasm asset support
config.resolver.assetExts.push('wasm');

// Add COEP and COOP headers to support SharedArrayBuffer
config.server.enhanceMiddleware = (middleware) => {
  return (req, res, next) => {
    res.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
    middleware(req, res, next);
  };
};

module.exports = config;
```

If you deploy your app to web hosting services, you will also need to add the `Cross-Origin-Embedder-Policy` and `Cross-Origin-Opener-Policy` headers to your web server. If you deploy your app on EAS Hosting, you can configure the headers in your app config:
app.json
```json
{
  "expo": {
    "plugins": [
      [
        "expo-router",
        {
          "headers": {
            "Cross-Origin-Embedder-Policy": "credentialless",
            "Cross-Origin-Opener-Policy": "same-origin"
          }
        }
      ]
    ]
  }
}
```
```

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

### Install expo-clipboard

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

Install the expo-clipboard library using the Expo CLI. Ensure Expo is installed in your project if it's a React Native app.

```bash
npx expo install expo-clipboard
```

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

### Install expo-intent-launcher

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

Installs the expo-intent-launcher library using npx. Ensure 'expo' is installed if integrating into an existing React Native project.

```bash
npx expo install expo-intent-launcher
```

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

### Install expo-image-picker

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

Command to install the expo-image-picker library using the Expo CLI.

```bash
npx expo install expo-image-picker
```

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

### Installation

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

Install the expo-live-photo library using npm or yarn.

```APIDOC
## Installation

Terminal
```
npx expo install expo-live-photo
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Install react-native-safe-area-context

Source: https://docs.expo.dev/versions/latest/sdk/safe-area-context

Command to install the library using the Expo CLI.

```bash
npx expo install react-native-safe-area-context
```

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

### DeviceMotion Installation

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

Install the expo-sensors library using the Expo CLI.

```APIDOC
## Installation

Terminal
```bash
npx expo install expo-sensors
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Install react-native-keyboard-controller

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

Command to install the library into an Expo project using the Expo CLI.

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

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

### Usage Example

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

A basic example demonstrating how to use expo-live-photo with expo-image-picker to select and display a Live Photo.

```APIDOC
## Usage

Here's a simple example of `expo-live-photo` usage combined with `expo-image-picker`.

LivePhoto

```javascript
import * as ImagePicker from 'expo-image-picker';
import { LivePhotoAsset, LivePhotoView, LivePhotoViewType } from 'expo-live-photo';
import { useRef, useState } from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

export default function LivePhotoScreen() {
  const viewRef = useRef<LivePhotoViewType>(null);
  const [livePhoto, setLivePhoto] = useState<LivePhotoAsset | null>(null);

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['livePhotos'],
    });

    if (!result.canceled && result.assets[0].pairedVideoAsset?.uri) {
      setLivePhoto({
        photoUri: result.assets[0].uri,
        pairedVideoUri: result.assets[0].pairedVideoAsset.uri,
      });
    } else {
      console.error('Failed to pick a live photo');
    }
  };

  if (!LivePhotoView.isAvailable()) {
    return (
      <View style={styles.container}>
        <Text>expo-live-photo is not available on this platform 😕</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <LivePhotoView
        ref={viewRef}
        source={livePhoto}
        style={[styles.livePhotoView, { display: livePhoto ? 'flex' : 'none' }]}
        onLoadComplete={() => {
          console.log('Live photo loaded successfully!');
        }}
        onLoadError={error => {
          console.error('Failed to load the live photo: ', error.message);
        }}
      />
      <View style={livePhoto ? styles.pickImageCollapsed : styles.pickImageExpanded}>
        <Button title={livePhoto ? 'Change Image' : 'Pick an image'} onPress={pickImage} />
      </View>
      <Button title="Start Playback Hint" onPress={() => viewRef.current?.startPlayback('hint')} />
      <Button title="Start Playback" onPress={() => viewRef.current?.startPlayback('full')} />
      <Button title="Stop Playback" onPress={() => viewRef.current?.stopPlayback()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 20,
    paddingHorizontal: 40,
  },
  livePhotoView: {
    alignSelf: 'stretch',
    height: 300,
  },
  pickImageExpanded: {
    alignSelf: 'stretch',
    height: 300,
    justifyContent: 'center',
  },
  pickImageCollapsed: {
    marginVertical: 10,
  },
  button: {
    marginVertical: 10,
  },
});
```
```

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

### Usage Example (app.json)

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

Configure native build properties for Android and iOS using the plugin in your app.json file.

```APIDOC
## Usage

### Example app.json with config plugin

```json
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "compileSdkVersion": 35,
            "targetSdkVersion": 35,
            "buildToolsVersion": "35.0.0"
          },
          "ios": {
            "deploymentTarget": "15.1"
          }
        }
      ]
    ]
  }
}
```
```

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

### Create Contact Example

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

Demonstrates how to create a new contact with basic information like name and phone number using the Contact class.

```javascript
const contact = await Contact.create({
   givenName: 'John',
   familyName: 'Doe',
   phones: [{ label: 'mobile', number: '+12123456789' }]
});
```

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

### Install @react-native-community/netinfo

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

Installs the @react-native-community/netinfo library using npx. For existing React Native projects, ensure 'expo' is installed and follow the library's README for further instructions.

```bash
npx expo install @react-native-community/netinfo
```

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

### Install expo-linking

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

Installs the expo-linking library into your project. Ensure you have Expo installed if using in a React Native project.

```bash
npx expo install expo-linking
```

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

### Installation

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

Instructions on how to install the Expo UI Switch component into your React Native project.

```APIDOC
## Installation

### Description
Install the Expo UI Switch component using npm or yarn.

### Method
Terminal command

### Endpoint
N/A

### Parameters
N/A

### Request Example
```bash
npx expo install @expo/ui
```

### Response
N/A
```

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

### Install expo-video-thumbnails

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

Instructions for installing the expo-video-thumbnails library using npx. If integrating into an existing React Native project without Expo Go, ensure the 'expo' package is also installed.

```bash
npx expo install expo-video-thumbnails
```

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

### Install react-native-view-shot

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

Command to install the library into an Expo project using the expo CLI.

```bash
npx expo install react-native-view-shot
```

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

### Installation

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

Install the @expo/ui package using npm or yarn.

```APIDOC
## Installation

Terminal
```
npx expo install @expo/ui
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Install Expo BackgroundFetch

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

Command to install the expo-background-fetch library using npm. Ensure expo is installed if in an existing React Native project.

```bash
npx expo install expo-background-fetch
```

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

### Install expo-background-task

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

Installs the expo-background-task library using npm. Ensure you have Expo installed in your project if using a React Native app.

```bash
npx expo install expo-background-task
```

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

### Image Picker Usage Example

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

Demonstrates how to use the ImagePicker module to allow users to select images or videos from their device's media library.

```APIDOC
## Image Picker Usage Example

### Description
This example shows how to launch the image library, request permissions, and display the selected image or video within your React Native application.

### Method
`launchImageLibraryAsync`

### Endpoint
N/A (This is a client-side module)

### Parameters
#### Request Body (for `launchImageLibraryAsync` options)
- **mediaTypes** (Array<string>) - Optional - Specifies whether to allow 'Images' or 'Videos'. Defaults to 'Images'.
- **allowsEditing** (boolean) - Optional - Whether to allow editing the media. Defaults to `false`.
- **aspect** (Array<number>) - Optional - Aspect ratio for editing (e.g., [4, 3]).
- **quality** (number) - Optional - Compression quality (0 to 1). Defaults to 1.

### Request Example
```javascript
import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

  if (!permissionResult.granted) {
    alert('Permission to access media library is required!');
    return;
  }

  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
  });

  if (!result.canceled) {
    // Handle the selected image/video URI
    console.log(result.assets[0].uri);
  }
};
```

### Response
#### Success Response (200)
- **assets** (Array<object>) - An array containing information about the selected media.
  - **uri** (string) - The URI of the selected media.
  - **width** (number) - The width of the media.
  - **height** (number) - The height of the media.
  - **type** (string) - The type of media ('image' or 'video').
- **canceled** (boolean) - True if the picker was canceled, false otherwise.

#### Response Example
```json
{
  "assets": [
    {
      "uri": "file:///.../image.jpg",
      "width": 1080,
      "height": 1920,
      "type": "image"
    }
  ],
  "canceled": false
}
```
```

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

### Usage Example (app.config.js)

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

Configure native build properties for Android and iOS using the plugin in your app.config.js file.

```APIDOC
### Example app.config.js with config plugin

```javascript
export default {
  expo: {
    plugins: [
      [
        'expo-build-properties',
        {
          android: {
            compileSdkVersion: 35,
            targetSdkVersion: 35,
            buildToolsVersion: '35.0.0',
          },
          ios: {
            deploymentTarget: '15.1',
          },
        },
      ],
    ],
  },
};
```
```

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

### Installation

Source: https://docs.expo.dev/versions/latest/sdk/ui/drop-in-replacements/datetimepicker

Install the @expo/ui package to use the DateTimePicker component.

```APIDOC
## Installation

Terminal
```bash
npx expo install @expo/ui
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Install expo-sqlite

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

Command to install the expo-sqlite library using npm. Ensure 'expo' is installed if integrating into an existing React Native project.

```bash
npx expo install expo-sqlite
```

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

### Install Expo Calendar

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

Command to install the expo-calendar library in your project.

```bash
npx expo install expo-calendar
```

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

### Implement Stack Toolbar with SearchBarSlot

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

Example demonstrating how to integrate a search bar slot into a bottom-positioned toolbar using Stack.Toolbar components.

```jsx
<Stack.SearchBar onChangeText={()=>{}} />
<Stack.Toolbar placement="bottom">
  <Stack.Toolbar.SearchBarSlot />
  <Stack.Toolbar.Spacer />
  <Stack.Toolbar.Button icon="square.and.pencil" />
</Stack.Toolbar>
```

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

### Install expo-localization

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

Installs the expo-localization library using the Expo CLI. Ensure Expo is installed in your project if it's a React Native app.

```bash
npx expo install expo-localization
```

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

### Install expo-age-range

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

Installs the expo-age-range library using the Expo CLI. Ensure you have Expo installed in your project. For existing React Native projects, additional setup might be required.

```bash
npx expo install expo-age-range
```

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

### Fetching Install Referrer

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

Retrieves the referrer URL from the Google Play Store for the installed application using the Install Referrer API.

```javascript
await Application.getInstallReferrerAsync();
```

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

### Getting File Extension in Expo

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

Illustrates how to get the file extension using the `extension` property. Example: `'.png'`. Supported on Android, iOS, and tvOS.

```javascript
const file = new File("image.png");
const extension = file.extension;
```

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

### Start Live Activity Instance

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

Demonstrates how to initiate a Live Activity instance from a React Native component using the defined activity configuration.

```typescript
import { Button, View } from 'react-native';
import DeliveryActivity from './DeliveryActivity';

function App() {
  const startDeliveryTracking = () => {
    const instance = DeliveryActivity.start(
      { etaMinutes: 15, status: 'Your delivery is on the way' },
      'myapp://deliveries/12345'
    );
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Start Delivery Tracking" onPress={startDeliveryTracking} />
    </View>
  );
}
```

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

### Box Component Usage Example

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

Example demonstrating how to use the Box component to stack and align child elements.

```APIDOC
## Box Component Usage Example

### Description
Example demonstrating how to use the Box component to stack and align child elements.

### Code
```typescript
import { Host, Box, Text } from '@expo/ui/jetpack-compose';
import { size, background } from '@expo/ui/jetpack-compose/modifiers';

export default function BoxExample() {
  return (
    <Host matchContents>
      <Box contentAlignment="center" modifiers={[size(200, 200), background('#E0E0E0')]}>
        <Text>Centered in Box</Text>
      </Box>
    </Host>
  );
}
```
```

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

### Install expo-apple-authentication

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

Installs the expo-apple-authentication library using the Expo CLI. This command is used for adding the library to your project.

```bash
npx expo install expo-apple-authentication
```

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

### Basic Stack Navigator Setup in Expo Router

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

Demonstrates the fundamental setup of a Stack navigator using the `Stack` component from `expo-router`. This is the entry point for defining a stack-based navigation structure in your application.

```javascript
import { Stack } from 'expo-router';

export default function Layout() {
  return <Stack />; 
}
```

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

### Install Expo LinearGradient

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

Command to install the library into an existing Expo project using the Expo CLI.

```bash
npx expo install expo-linear-gradient
```

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

### Install expo-status-bar

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

Installs the expo-status-bar library using the Expo CLI. This command ensures that the correct version compatible with your Expo project is installed.

```bash
npx expo install expo-status-bar
```

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

### Install expo-video

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

Command to install the expo-video library using npm. Ensure Expo is installed in your project if using a bare React Native app.

```bash
npx expo install expo-video
```

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

### Install Expo Camera

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

Installs the expo-camera package using the Expo CLI. Ensure you have Expo installed in your project if it's a React Native app.

```bash
npx expo install expo-camera
```

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

### Implement Basic Brightness Control

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

A React Native example demonstrating how to request permissions and set the system brightness to maximum.

```javascript
import { useEffect } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import * as Brightness from 'expo-brightness';

export default function App() {
  useEffect(() => {
    (async () => {
      const { status } = await Brightness.requestPermissionsAsync();
      if (status === 'granted') {
        Brightness.setSystemBrightnessAsync(1);
      }
    })();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Brightness Module Example</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' },
});
```

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

### Get Asset URI

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

Retrieves the system URI pointing to the asset's location. Example: 'file:///storage/emulated/0/DCIM/Camera/IMG_20230915_123456.jpg'. Returns a promise resolving to the string URI.

```javascript
const uri = await asset.getUri();
```

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

### Install Expo DevMenu

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

Command to install the expo-dev-menu library using npx. Ensure 'expo' is installed in your project if it's an existing React Native app.

```bash
npx expo install expo-dev-menu
```

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

### Get Available Email Clients

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

Retrieves a list of all email clients installed on the device. This can be useful for presenting users with their preferred email client or for opening a specific client.

```javascript
const clients = await MailComposer.getClients();
console.log(clients);
```

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

### Install expo-device

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

Installs the expo-device library using the Expo CLI. Ensure you have Expo installed in your project if integrating into an existing React Native app.

```bash
npx expo install expo-device
```

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

### Install expo-sensors

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

Install the expo-sensors library using npm. This package provides access to various device sensors, including the barometer.

```bash
npx expo install expo-sensors
```

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

### Installation

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

Install the expo-asset library in your Expo or React Native project.

```APIDOC
## Installation

Terminal
```bash
npx expo install expo-asset
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Get Container Type - JavaScript

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

Retrieves the type of a contact container, for example, 'cardDAV' or 'exchange'. This method returns a promise that resolves to the container type as a string, or null if it's not available.

```javascript
const type = await container.getType(); // 'cardDAV'
```

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

### Render Basic Graphics with GLView

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

Demonstrates how to initialize a GLView and perform basic WebGL rendering, including shader compilation and drawing a point.

```javascript
import { View } from 'react-native';
import { GLView } from 'expo-gl';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <GLView style={{ width: 300, height: 300 }} onContextCreate={onContextCreate} />
    </View>
  );
}

function onContextCreate(gl) {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 1, 1, 1);

  const vert = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vert, `void main(void) { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); gl_PointSize = 150.0; }`);
  gl.compileShader(vert);

  const frag = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(frag, `void main(void) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); }`);
  gl.compileShader(frag);

  const program = gl.createProgram();
  gl.attachShader(program, vert);
  gl.attachShader(program, frag);
  gl.linkProgram(program);
  gl.useProgram(program);

  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);
  gl.flush();
  gl.endFrameEXP();
}
```

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

### Define and Handle Background Location Task

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

Defines a background task for location updates and requests necessary permissions. This example demonstrates how to start location updates and process them in the background using Expo TaskManager and Expo Location.

```javascript
import React from 'react';
import { Button, View, StyleSheet } from 'react-native';
import * as TaskManager from 'expo-task-manager';
import * as Location from 'expo-location';

const LOCATION_TASK_NAME = 'background-location-task';

const requestPermissions = async () => {
  const { status: foregroundStatus } = await Location.requestForegroundPermissionsAsync();
  if (foregroundStatus === 'granted') {
    const { status: backgroundStatus } = await Location.requestBackgroundPermissionsAsync();
    if (backgroundStatus === 'granted') {
      await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
        accuracy: Location.Accuracy.Balanced,
      });
    }
  }
};

const PermissionsButton = () => (
  <View style={styles.container}>
    <Button onPress={requestPermissions} title="Enable background location" />
  </View>
);

TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
  if (error) {
    // Error occurred - check `error.message` for more details.
    return;
  }
  if (data) {
    const { locations } = data;
    // do something with the locations captured in the background
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default PermissionsButton;
```

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

### Installation

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

Install the @expo/ui package in your React Native project.

```APIDOC
## Installation

Terminal

```bash
npx expo install @expo/ui
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Video Player Implementation

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

How to initialize a video player and listen to playback events using the useVideoPlayer hook and useEvent listener.

```APIDOC
## Video Player Usage

### Description
Initialize a video player instance and bind it to a VideoView component. Use the useEvent hook to track state changes like playback status.

### Implementation
- **useVideoPlayer** (hook) - Initializes the player with a source URL.
- **VideoView** (component) - Renders the video player UI.
- **useEvent** (hook) - Listens to player events such as 'playingChange' or 'statusChange'.

### Response Example
// Example of tracking playback status
const { isPlaying } = useEvent(player, 'playingChange', { isPlaying: player.playing });
```

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

### Basic Usage

Source: https://docs.expo.dev/versions/latest/sdk/ui/drop-in-replacements/datetimepicker

Example of how to use the DateTimePicker component for selecting a date.

```APIDOC
## Basic usage

```tsx
import { useState } from 'react';
import DateTimePicker from '@expo/ui/datetimepicker';

export default function DateTimePickerExample() {
  const [date, setDate] = useState(new Date());

  return (
    <DateTimePicker
      value={date}
      onValueChange={(event, selectedDate) => {
        setDate(selectedDate);
      }}
      mode="date"
    />
  );
}
```
```

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

### Install Stripe React Native Library

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

Command to install the correct version of the Stripe library compatible with the current Expo SDK.

```bash
npx expo install @stripe/stripe-react-native
```

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

### Start Image Animation - startAnimating

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

Asynchronously starts the playback of an animated image view. This is used to control the animation of GIF or other animated image formats. It returns a promise that resolves when the animation playback has started.

```javascript
import { Image } from 'expo-image';

async function startImageAnimation() {
  await Image.startAnimating();
  console.log('Image animation started.');
}
```

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

### Print Local Image to PDF using Expo Print

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

This example demonstrates how to print a local image to a PDF using Expo Print. It first downloads the asset, manipulates the image to get its base64 representation, and then embeds this base64 string into an HTML structure for printing. This approach is necessary on iOS due to WKWebView limitations with local asset URLs.

```javascript
import { Asset } from 'expo-asset';
import { useImageManipulator } from 'expo-image-manipulator';
import { printAsync } from 'expo-print';
import { useEffect } from 'react';

const IMAGE = Asset.fromModule(require('@/assets/images/icon.png'));

export function ImageManipulatorExample() {
  const context = useImageManipulator(IMAGE.uri);

  useEffect(() => {
    async function generateAndPrint() {
      try {
        await IMAGE.downloadAsync();
        const manipulatedImage = await context.renderAsync();
        const result = await manipulatedImage.saveAsync({ base64: true });

        const html = `
          <html>
            <img
              src="data:image/png;base64,${result.base64}"
              style="width: 90vw;" />
          </html>
        `;

        await printAsync({ html });
      } catch (error) {
        console.error('Error:', error);
      }
    }

    generateAndPrint();
  }, [context]);

  return <>{/* Render UI */}</>;
}
```

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

### Install expo-brownfield

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

Command to install the expo-brownfield package. Ensure 'expo' is installed if integrating into an existing React Native app.

```bash
npx expo install expo-brownfield
```

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

### SwiftUI TextField Usage Example

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

Example demonstrating how to use the TextField component within a SwiftUI Host. It shows basic configuration like disabling autocorrection and setting a default value, along with an onChangeText handler.

```swiftui
import { Host, TextField } from '@expo/ui/swift-ui';

<Host matchContents>
  <TextField autocorrection={false} defaultValue="A single line text input" onChangeText={setValue} />
</Host>
```

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

### Install Expo GL

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

Command to install the expo-gl package into an existing Expo or React Native project.

```bash
npx expo install expo-gl
```

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

### Install Expo TaskManager

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

Installs the expo-task-manager package using the Expo CLI. Ensure you have Expo installed in your React Native project.

```bash
npx expo install expo-task-manager
```

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

### Settings

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

Action to open the main system settings.

```APIDOC
## GET /settings

### Description
Opens the main Android settings screen.

### Method
GET

### Endpoint
/settings

### Parameters
None

### Request Example
None

### Response
#### Success Response (200)
Opens the main system settings.

#### Response Example
None
```

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

### Install Expo Haptics

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

Command to install the expo-haptics library into an existing Expo or React Native project using npm or yarn.

```bash
npx expo install expo-haptics
```

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

### File Constructor Example in Expo

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

Provides an example of how to construct a `File` object. The constructor can accept a `Directory` instance and file name components. This is useful for creating references to files on the filesystem.

```javascript
const file = new File(Paths.cache, "subdirName", "file.txt");
```

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

### Install Expo Screen Orientation

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

Installs the expo-screen-orientation library using npm. Ensure you have Expo installed in your React Native project.

```bash
npx expo install expo-screen-orientation
```

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

### HorizontalFloatingToolbar with FAB Example

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

Example demonstrating how to use the HorizontalFloatingToolbar component with IconButton for toolbar items and HorizontalFloatingToolbar.FloatingActionButton for the primary action. It uses icons from local assets.

```typescript
import { Host, HorizontalFloatingToolbar, IconButton, Icon } from '@expo/ui/jetpack-compose';

export default function ToolbarWithFABExample() {
  return (
    <Host matchContents>
      <HorizontalFloatingToolbar>
        <IconButton onPress={() => console.log('Edit pressed')}>
          <Icon source={require('./assets/edit.xml')} contentDescription="Edit" />
        </IconButton>
        <IconButton onPress={() => console.log('Share pressed')}>
          <Icon source={require('./assets/share.xml')} contentDescription="Share" />
        </IconButton>
        <HorizontalFloatingToolbar.FloatingActionButton onPress={() => console.log('Add pressed')}>
          <Icon source={require('./assets/add.xml')} contentDescription="Add" />
        </HorizontalFloatingToolbar.FloatingActionButton>
      </HorizontalFloatingToolbar>
    </Host>
  );
}
```

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

### Install expo-server

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

Installs the expo-server library using the Expo CLI. This is the first step to enabling server-side features in your Expo Router project.

```bash
npx expo install expo-server
```

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

### Start Activity Async

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

Starts a specified Android activity. It can take an activity action and optional parameters. The method returns a promise that resolves when the user returns to the app, providing a result object.

```javascript
IntentLauncher.startActivityAsync(activityAction: string, params?: IntentLauncherParams): Promise<IntentLauncherResult>
```

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

### Install expo-dev-client

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

Command to install the expo-dev-client library using npm. This is the first step for integrating development tools into your React Native project.

```bash
npx expo install expo-dev-client
```

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

### Utilize Prepared Statements for Secure Queries

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

Shows how to compile SQL queries using prepareAsync to improve performance and security. Includes examples of executing statements with parameters and properly finalizing them to release resources.

```javascript
const statement = await db.prepareAsync('INSERT INTO test (value, intValue) VALUES ($value, $intValue)');
try {
  await statement.executeAsync({ $value: 'bbb', $intValue: 101 });
} finally {
  await statement.finalizeAsync();
}

const statement2 = await db.prepareAsync('SELECT * FROM test WHERE intValue >= $intValue');
try {
  const result = await statement2.executeAsync({ $intValue: 100 });
  const firstRow = await result.getFirstAsync();
  await result.resetAsync();
  const allRows = await result.getAllAsync();
} finally {
  await statement2.finalizeAsync();
}
```

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

### Install Expo Brightness

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

Command to install the expo-brightness package into an existing Expo or React Native project.

```bash
npx expo install expo-brightness
```

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

### Installation Command for Expo Constants

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

The command to install the `expo-constants` library in your Expo project using the Expo CLI.

```bash
npx expo install expo-constants
```

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

### Install Expo AuthSession and Expo Crypto

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

Installs the necessary Expo AuthSession and Expo Crypto libraries. Expo Crypto is a peer dependency and must be installed alongside AuthSession.

```bash
npx expo install expo-auth-session expo-crypto
```

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

### Install react-native-svg

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

Command to install the react-native-svg library in your Expo project. Ensure Expo is installed if integrating into an existing React Native app.

```bash
npx expo install react-native-svg
```

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

### Install Dependencies for Blurhash Generation

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

Installs the necessary npm packages for handling multipart requests (multer), image processing (sharp), and blurhash generation (blurhash).

```bash
npm install multer sharp blurhash
```

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

### Install Expo Checkbox

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

Command to install the expo-checkbox package into an existing Expo project using npx.

```bash
npx expo install expo-checkbox
```

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

### startActivityAsync

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

Starts a specified Android activity with optional parameters.

```APIDOC
## POST /expo-intent-launcher/startActivityAsync

### Description
Starts the specified activity. The method will return a promise which resolves when the user returns to the app.

### Method
POST

### Endpoint
`/expo-intent-launcher/startActivityAsync`

### Parameters
#### Request Body
- **activityAction** (string) - Required - The action to be performed, for example, `IntentLauncher.ActivityAction.WIRELESS_SETTINGS`. There are a few pre-defined constants you can use for this parameter. You can find them at `expo-intent-launcher/src/IntentLauncher.ts`.
- **params** (object) - Optional - An object of intent parameters.
  - **category** (string) - Optional - Category provides more details about the action the intent performs.
  - **className** (string) - Optional - Class name of the ComponentName.
  - **data** (string) - Optional - A URI specifying the data that the intent should operate upon.
  - **extra** (Record<string, any>) - Optional - A map specifying additional key-value pairs which are passed with the intent as `extras`.
  - **flags** (number) - Optional - Bitmask of flags to be used.
  - **packageName** (string) - Optional - Package name used as an identifier of ComponentName.
  - **type** (string) - Optional - A string specifying the MIME type of the data.

### Response
#### Success Response (200)
- **data** (string) - Optional data URI that can be returned by the activity.
- **extra** (object) - Optional extras object that can be returned by the activity.
- **resultCode** (ResultCode) - Result code returned by the activity.

#### Response Example
```json
{
  "data": "some_data_uri",
  "extra": {
    "key": "value"
  },
  "resultCode": 0
}
```
```

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

### Install @expo/app-integrity

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

Command to install the library into an existing Expo or React Native project.

```bash
npx expo install @expo/app-integrity
```

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

### Install expo-build-properties

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

Installs the expo-build-properties package using the Expo CLI. This command is used for adding the plugin to an Expo project.

```bash
npx expo install expo-build-properties
```

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

### Implement Stack Toolbar Menu

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

Shows how to create a toolbar menu using Stack.Toolbar.Menu, including an icon, label, and a menu action.

```javascript
<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>
```

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

### Installation

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

Install the @expo/ui package to use the RadioButton component. Ensure 'expo' is installed in your React Native project if it's not a bare Expo project.

```APIDOC
## Installation

```bash
npx expo install @expo/ui
```

If you are installing this in an existing React Native app, make sure to install `expo` in your project.
```

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

### Install expo-local-authentication

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

Command to install the expo-local-authentication library using the Expo CLI. This is the first step to integrate biometric authentication into your project.

```bash
npx expo install expo-local-authentication
```

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

### Linking.openSettings

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

Opens the OS settings for the application.

```APIDOC
## Linking.openSettings()

### Description
Open the operating system settings app and displays the app’s custom settings, if it has any.

### Response
#### Success Response
- **Promise<void>** - Resolves when the settings app is opened.
```

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

### Install expo-asset

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

Installs the expo-asset library using the Expo CLI. Ensure you have Expo installed in your project if integrating into an existing React Native app.

```bash
npx expo install expo-asset
```

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

### Implement Two-Column Layout with SplitView

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

Example of a basic two-column layout using SplitView and SplitView.Column to organize navigation links within a sidebar.

```tsx
import { Link } from 'expo-router';
import { SplitView } from 'expo-router/unstable-split-view';
import { Text, Pressable } from 'react-native';
import { SafeAreaView } from 'react-native-screens/experimental';

export default function Layout() {
  return (
    <SplitView>
      <SplitView.Column>
        <SafeAreaView edges={{ left: true, top: true }} style={{ flex: 1 }}>
          <Link href="/inbox">
            <Pressable style={{ padding: 16 }}>
              <Text>Inbox</Text>
            </Pressable>
          </Link>
          <Link href="/sent">
            <Pressable style={{ padding: 16 }}>
              <Text>Sent</Text>
            </Pressable>
          </Link>
        </SafeAreaView>
      </SplitView.Column>
    </SplitView>
  );
}
```

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

### Install Expo BlurView

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

Installs the expo-blur package using the Expo CLI. Ensure you have Expo installed in your project if integrating into a React Native app.

```bash
npx expo install expo-blur
```

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

### Install react-native-pager-view

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

Installs the react-native-pager-view library using the Expo package manager. Ensure Expo is installed in your project if integrating into an existing React Native app.

```bash
npx expo install react-native-pager-view
```