Expo SDK 54

https://docs.expo.dev/versions/v54.0.0
Admin
Expo SDK 54 provides a comprehensive set of modules and APIs for building universal native...
Tokens:500,447
Snippets:5,392
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Recording sounds

Source: https://docs.expo.dev/versions/v54.0.0/sdk/audio-av

Example of how to request permissions, start, and stop audio recording using Audio.Recording.

```jsx
import { useState } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Audio } from 'expo-av';

export default function App() {
  const [recording, setRecording] = useState();
  const [permissionResponse, requestPermission] = Audio.usePermissions();

  async function startRecording() {
    try {
      if (permissionResponse.status !== 'granted') {
        console.log('Requesting permission..');
        await requestPermission();
      }
      await Audio.setAudioModeAsync({
        allowsRecordingIOS: true,
        playsInSilentModeIOS: true,
      });

      console.log('Starting recording..');
      const { recording } = await Audio.Recording.createAsync( Audio.RecordingOptionsPresets.HIGH_QUALITY
      );
      setRecording(recording);
      console.log('Recording started');
    } catch (err) {
      console.error('Failed to start recording', err);
    }
  }

  async function stopRecording() {
    console.log('Stopping recording..');
    setRecording(undefined);
    await recording.stopAndUnloadAsync();
    await Audio.setAudioModeAsync(
      {
        allowsRecordingIOS: false,
      }
    );
    const uri = recording.getURI();
    console.log('Recording stopped and stored at', uri);
  }

  return (
    <View style={styles.container}>
      <Button
        title={recording ? 'Stop Recording' : 'Start Recording'}
        onPress={recording ? stopRecording : startRecording}
      />
    </View>
  );
}

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

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

### Install expo-video-thumbnails

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

Commands to install the library using various package managers.

```sh
# npm
npx expo install expo-video-thumbnails

# yarn
yarn expo install expo-video-thumbnails

# pnpm
pnpm expo install expo-video-thumbnails

# bun
bun expo install expo-video-thumbnails
```

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

### Install react-native-webview

Source: https://docs.expo.dev/versions/v54.0.0/sdk/webview

Commands to install the library using various package managers.

```sh
# npm
npx expo install react-native-webview

# yarn
yarn expo install react-native-webview

# pnpm
pnpm expo install react-native-webview

# bun
bun expo install react-native-webview
```

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

### Install @shopify/flash-list

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

Commands to install the library using various package managers.

```bash
# 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
```

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

### Install expo-media-library

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

Commands to install the library using various package managers.

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

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

### Install expo-tracking-transparency

Source: https://docs.expo.dev/versions/v54.0.0/sdk/tracking-transparency

Commands to install the library using various package managers.

```sh
# npm
npx expo install expo-tracking-transparency

# yarn
yarn expo install expo-tracking-transparency

# pnpm
pnpm expo install expo-tracking-transparency

# bun
bun expo install expo-tracking-transparency
```

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

### Install expo-image-picker

Source: https://docs.expo.dev/versions/v54.0.0/sdk/imagepicker

Commands to install the library using various package managers.

```sh
# npm
npx expo install expo-image-picker

# yarn
yarn expo install expo-image-picker

# pnpm
pnpm expo install expo-image-picker

# bun
bun expo install expo-image-picker
```

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

### Install expo-document-picker

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

Commands to install the library using various package managers.

```sh
# 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
```

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

### Example permissions array

Source: https://docs.expo.dev/versions/v54.0.0/config/app

An example of adding a specific permission to the Android manifest.

```javascript
['android.permission.SCHEDULE_EXACT_ALARM']
```

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

### Example playStoreUrl

Source: https://docs.expo.dev/versions/v54.0.0/config/app

An example URL pointing to an app on the Google Play Store.

```json
"https://play.google.com/store/apps/details?id=host.exp.exponent"
```

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

### Install expo-screen-orientation

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

Commands to install the library using various package managers.

```sh
# npm
npx expo install expo-screen-orientation

# yarn
yarn expo install expo-screen-orientation

# pnpm
pnpm expo install expo-screen-orientation

# bun
bun expo install expo-screen-orientation
```

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

### Install react-native-view-shot

Source: https://docs.expo.dev/versions/v54.0.0/sdk/captureRef

Commands to install the library using various package managers.

```sh
# npm
npx expo install react-native-view-shot

# yarn
yarn expo install react-native-view-shot

# pnpm
pnpm expo install react-native-view-shot

# bun
bun expo install react-native-view-shot
```

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

### Install expo-intent-launcher

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

Commands to install the library using various package managers.

```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 react-native-keyboard-controller

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

Commands to install the library using npm, yarn, pnpm, or bun.

```sh
# 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-local-authentication

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

Commands to install the library using various package managers.

```sh
# npm
npx expo install expo-local-authentication

# yarn
yarn expo install expo-local-authentication

# pnpm
pnpm expo install expo-local-authentication

# bun
bun expo install expo-local-authentication
```

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

### Install expo-video

Source: https://docs.expo.dev/versions/v54.0.0/sdk/video

Commands to install the expo-video package using various package managers.

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

# yarn
yarn expo install expo-video

# pnpm
pnpm expo install expo-video

# bun
bun expo install expo-video
```

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

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

Source: https://docs.expo.dev/versions/v54.0.0/sdk/netinfo

Commands to install the library using npm, yarn, pnpm, or bun.

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

# yarn
yarn expo install @react-native-community/netinfo

# pnpm
pnpm expo install @react-native-community/netinfo

# bun
bun expo install @react-native-community/netinfo
```

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

### Install expo-system-ui

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

Commands to install the expo-system-ui package using various package managers.

```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 expo-store-review

Source: https://docs.expo.dev/versions/v54.0.0/sdk/storereview

Commands to install the expo-store-review package using various package managers.

```sh
# npm
npx expo install expo-store-review

# yarn
yarn expo install expo-store-review

# pnpm
pnpm expo install expo-store-review

# bun
bun expo install expo-store-review
```

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

### Get Registered Tasks Example

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

An example of the data structure returned by getRegisteredTasksAsync, showing registered tasks with their names, types, and options.

```js
[
  {
    taskName: 'location-updates-task-name',
    taskType: 'location',
    options: {
      accuracy: Location.Accuracy.High,
      showsBackgroundLocationIndicator: false,
    },
  },
  {
    taskName: 'geofencing-task-name',
    taskType: 'geofencing',
    options: {
      regions: [...],
    },
  },
]
```

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

### Initialize and start Audio.Recording

Source: https://docs.expo.dev/versions/v54.0.0/sdk/audio-av

Create a new Recording instance, prepare it with high-quality presets, and start recording.

```ts
const recording = new Audio.Recording();
try {
  await recording.prepareToRecordAsync(Audio.RecordingOptionsPresets.HIGH_QUALITY);
  await recording.startAsync();
  // You are now recording!
} catch (error) {
  // An error occurred!
}
```

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

### Get carrier name

Source: https://docs.expo.dev/versions/v54.0.0/sdk/cellular

Example usage of the deprecated Cellular.carrier property.

```ts
Cellular.carrier; // "T-Mobile" or "Verizon"
```

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

### Create recording with createAsync

Source: https://docs.expo.dev/versions/v54.0.0/sdk/audio-av

Demonstrates the usage of createAsync to initialize and start a recording, showing its equivalence to manual preparation and starting.

```ts
const { recording, status } = await Audio.Recording.createAsync(
  options,
  onRecordingStatusUpdate,
  progressUpdateIntervalMillis
);

// Which is equivalent to the following:
const recording = new Audio.Recording();
await recording.prepareToRecordAsync(options);
recording.setOnRecordingStatusUpdate(onRecordingStatusUpdate);
await recording.startAsync();
```

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

### Create a Directory instance

Source: https://docs.expo.dev/versions/v54.0.0/sdk/filesystem

Demonstrates how to instantiate a Directory object using a base path and a subdirectory name.

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

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

### Get mobile network code

Source: https://docs.expo.dev/versions/v54.0.0/sdk/cellular

Example usage of the deprecated Cellular.mobileNetworkCode property.

```ts
Cellular.mobileNetworkCode; // "260"
```

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

### Install expo-glass-effect

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

Commands to install the expo-glass-effect package using various package managers.

```sh
# 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
```

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

### Get mobile country code

Source: https://docs.expo.dev/versions/v54.0.0/sdk/cellular

Example usage of the deprecated Cellular.mobileCountryCode property.

```ts
Cellular.mobileCountryCode; // "310"
```

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

### useVideoPlayer(source, setup)

Source: https://docs.expo.dev/versions/v54.0.0/sdk/video

Creates a VideoPlayer instance.

```APIDOC
### useVideoPlayer(source, setup)

Creates a `VideoPlayer`, which will be automatically cleaned up when the component is unmounted.

**Parameters:**
- `source` (VideoSource) - Required - A video source that is used to initialize the player.
- `setup` ((player: VideoPlayer) => void) - Optional - A function that allows setting up the player.

**Returns:** `VideoPlayer`

**Supported platforms:** Android, iOS, tvOS, Web.
```

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

### Get ISO country code

Source: https://docs.expo.dev/versions/v54.0.0/sdk/cellular

Example usage of the deprecated Cellular.isoCountryCode property.

```ts
Cellular.isoCountryCode; // "us" or "au"
```

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

### FINGERPRINT_SETUP

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

Constant for launching the fingerprint setup.

```text
ActivityAction.FINGERPRINT_SETUP = "android.settings.FINGERPRINT_SETUP"
```

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

### Playing sounds

Source: https://docs.expo.dev/versions/v54.0.0/sdk/audio-av

Example of how to load and play a sound file using Audio.Sound.createAsync.

```jsx
import { useEffect, useState } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Audio } from 'expo-av';

export default function App() {
  const [sound, setSound] = useState();

  async function playSound() {
    console.log('Loading Sound');
    const { sound } = await Audio.Sound.createAsync( require('./assets/Hello.mp3')
    );
    setSound(sound);

    console.log('Playing Sound');
    await sound.playAsync();
  }

  useEffect(() => {
    return sound
      ? () => {
          console.log('Unloading Sound');
          sound.unloadAsync();
        }
      : undefined;
  }, [sound]);

  return (
    <View style={styles.container}>
      <Button title="Play Sound" onPress={playSound} />
    </View>
  );
}

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

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

### Initialize and play a sound

Source: https://docs.expo.dev/versions/v54.0.0/sdk/audio-av

Demonstrates how to instantiate an Audio.Sound object, load an asset, play it, and unload it from memory.

```ts
const sound = new Audio.Sound();
try {
  await sound.loadAsync(require('./assets/sounds/hello.mp3'));
  await sound.playAsync();
  // Your sound is playing!

  // Don't forget to unload the sound from memory
  // when you are done using the Sound object
  await sound.unloadAsync();
} catch (error) {
  // An error occurred!
}
```

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

### Get current location with Expo Location

Source: https://docs.expo.dev/versions/v54.0.0/sdk/location

This example demonstrates how to request foreground location permissions and retrieve the current device position using getCurrentPositionAsync.

```tsx
import { useState, useEffect } from 'react';
import { Platform, Text, View, StyleSheet } from 'react-native';

import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState<Location.LocationObject | null>(null);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  useEffect(() => {
    async function getCurrentLocation() {
      
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    }

    getCurrentLocation();
  }, []);

  let text = 'Waiting...';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  paragraph: {
    fontSize: 18,
    textAlign: 'center',
  },
});
```

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

### Create a File instance

Source: https://docs.expo.dev/versions/v54.0.0/sdk/filesystem

Demonstrates how to instantiate a File object using a base path and file path segments.

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

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

### Get Expo push token

Source: https://docs.expo.dev/versions/v54.0.0/sdk/notifications

Example of retrieving an Expo push token and sending it to a backend server. It is recommended to wrap this in a try/catch block to handle potential network failures.

```ts
import * as Notifications from 'expo-notifications';

export async function registerForPushNotificationsAsync(userId: string) {
  const expoPushToken = await Notifications.getExpoPushTokenAsync({
   projectId: 'your-project-id',
  });

  await fetch('https://example.com/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      userId,
      expoPushToken,
    }),
  });
}
```

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

### Updates.updateId example

Source: https://docs.expo.dev/versions/v54.0.0/sdk/updates

Example of the UUID format returned by Updates.updateId.

```js
"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
```

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

### create(source, initialStatus, onPlaybackStatusUpdate, downloadFirst)

Source: https://docs.expo.dev/versions/v54.0.0/sdk/audio-av

Creates a new Sound instance.

```APIDOC
## create(source, initialStatus, onPlaybackStatusUpdate, downloadFirst)

### Description
Creates a new Sound instance. Note: This method is deprecated; use `Sound.createAsync()` instead.

### Parameters
- **source** (AVPlaybackSource) - Required
- **initialStatus** (AVPlaybackStatusToSet) - Optional
- **onPlaybackStatusUpdate** (function) - Optional
- **downloadFirst** (boolean) - Optional

### Returns
- **Promise<SoundObject>**
```

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

### Preloading videos with VideoPlayer

Source: https://docs.expo.dev/versions/v54.0.0/sdk/video

This example demonstrates how to preload videos by creating multiple VideoPlayer instances and switching between them in a VideoView. Preloading allows for quicker transitions by filling buffers before the video is displayed.

```tsx
import { useVideoPlayer, VideoView, VideoSource } from 'expo-video';
import { useState, useCallback } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

const bigBuckBunnySource: VideoSource =
  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

const elephantsDreamSource: VideoSource =
  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4';

export default function PreloadingVideoPlayerScreen() {
  const player1 = useVideoPlayer(bigBuckBunnySource, player => {
    player.play();
  });

  const player2 = useVideoPlayer(elephantsDreamSource, player => {
    player.currentTime = 20;
  });

  const [currentPlayer, setCurrentPlayer] = useState(player1);

  const replacePlayer = useCallback(async () => {
    currentPlayer.pause();
    if (currentPlayer === player1) {
      setCurrentPlayer(player2);
      player1.pause();
      player2.play();
    } else {
      setCurrentPlayer(player1);
      player2.pause();
      player1.play();
    }
  }, [player1, currentPlayer]);

  return (
    <View style={styles.contentContainer}>
      <VideoView player={currentPlayer} style={styles.video} nativeControls={false} />
      <TouchableOpacity style={styles.button} onPress={replacePlayer}>
        <Text style={styles.buttonText}>Replace Player</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
    padding: 10,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 50,
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 3,
    paddingVertical: 8,
    paddingHorizontal: 12,
    backgroundColor: '#4630ec',
  },
  buttonText: {
    fontSize: 12,
    fontWeight: 'bold',
    color: '#eeeeee',
    textAlign: 'center',
  },
  video: {
    width: 300,
    height: 168.75,
    marginVertical: 20,
  },
});
```

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

### Using a local config plugin

Source: https://docs.expo.dev/versions/v54.0.0/sdk/fingerprint

This example shows how to define a local config plugin in a separate module and reference it in the app configuration to ensure unique fingerprints.

```js
const { withInfoPlist } = require('expo/config-plugins');

const withMyPlugin = config => {
  return withInfoPlist(config, config => {
    config.modResults.NSLocationWhenInUseUsageDescription =
      'Allow $(PRODUCT_NAME) to use your location';
    return config;
  });
};

module.exports = withMyPlugin;
```

```json
{
  "expo": {
    ... 
    "plugins": "./plugins/withMyPlugin"
  }
}
```

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

### HOME_SETTINGS

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

Constant for launching the home settings.

```text
ActivityAction.HOME_SETTINGS = "android.settings.HOME_SETTINGS"
```

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

### Install expo-maps

Source: https://docs.expo.dev/versions/v54.0.0/sdk/maps

Use your preferred package manager to install the expo-maps library.

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

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

### SETUP_LOCK_SCREEN ActivityAction

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

Constant for the setup lock screen activity.

```text
ActivityAction.SETUP_LOCK_SCREEN = "com.android.settings.SETUP_LOCK_SCREEN"
```

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

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

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

Commands to install the library using various package managers.

```sh
# npm
npx expo install react-native-safe-area-context

# yarn
yarn expo install react-native-safe-area-context

# pnpm
pnpm expo install react-native-safe-area-context

# bun
bun expo install react-native-safe-area-context
```

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

### RecordingStartOptions

Source: https://docs.expo.dev/versions/v54.0.0/sdk/audio

Configuration object used to control the behavior of audio recording initiation.

```APIDOC
## RecordingStartOptions

### Description
Options for controlling how audio recording is started.

### Properties
- **atTime** (number) - Optional - The time in seconds to wait before starting the recording (iOS only).
- **forDuration** (number) - Optional - The duration in seconds after which recording should automatically stop.
```

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

### Install expo-navigation-bar

Source: https://docs.expo.dev/versions/v54.0.0/sdk/navigation-bar

Commands to install the library using various package managers.

```sh
# npm
npx expo install expo-navigation-bar

# yarn
yarn expo install expo-navigation-bar

# pnpm
pnpm expo install expo-navigation-bar

# bun
bun expo install expo-navigation-bar
```

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

### create(options)

Source: https://docs.expo.dev/versions/v54.0.0/sdk/filesystem

Creates a file with optional configuration.

```APIDOC
## create(options)

### Description
Creates a file.

### Parameters
- **options** (FileCreateOptions) - Optional - Configuration options for file creation.
```

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

### startAsync()

Source: https://docs.expo.dev/versions/v54.0.0/sdk/audio-av

Begins recording. This method can only be called if the Recording has been prepared.

```APIDOC
## startAsync()

### Description
Begins recording. This method can only be called if the `Recording` has been prepared.

### Returns
- **Promise<RecordingStatus>** - A promise that is fulfilled when recording has begun, or rejects if recording could not be started.
```

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

### Install expo-mesh-gradient

Source: https://docs.expo.dev/versions/v54.0.0/sdk/mesh-gradient

Commands to install the package using various package managers.

```sh
# npm
npx expo install expo-mesh-gradient

# yarn
yarn expo install expo-mesh-gradient

# pnpm
pnpm expo install expo-mesh-gradient

# bun
bun expo install expo-mesh-gradient
```

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

### Obtain Audio.Sound playback object

Source: https://docs.expo.dev/versions/v54.0.0/sdk/av

Demonstrates setting the audio mode and creating a playback object using Audio.Sound.

```js
await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });

const playbackObject = new Audio.Sound();
// OR
const { sound: playbackObject } = await Audio.Sound.createAsync(
  { uri: 'http://foo/bar.mp3' },
  { shouldPlay: true }
);
```

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

### Basic WebView usage

Source: https://docs.expo.dev/versions/v54.0.0/sdk/webview

A simple example showing how to render a remote website using the WebView component.

```jsx
import { WebView } from 'react-native-webview';
import Constants from 'expo-constants';
import { StyleSheet } from 'react-native';

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});
```

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

### Access file extension

Source: https://docs.expo.dev/versions/v54.0.0/sdk/filesystem

Example of a file extension string.

```text
'.png'
```

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

### Install @expo/app-integrity

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

Commands to install the library using various package managers.

```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 globalThis.localStorage

Source: https://docs.expo.dev/versions/v54.0.0/sdk/sqlite

Import the install module to provide a drop-in implementation for the localStorage API. This is a no-op on web.

```ts
import 'expo-sqlite/localStorage/install';

globalThis.localStorage.setItem('key', 'value');
console.log(globalThis.localStorage.getItem('key')); // 'value'
```

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

### Get Visibility

Source: https://docs.expo.dev/versions/v54.0.0/sdk/navigation-bar

Get the navigation bar's current visibility status.

```ts
const visibility = await NavigationBar.getVisibilityAsync("hidden");
```

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

### recordAsync(options)

Source: https://docs.expo.dev/versions/v54.0.0/sdk/camera

Starts recording a video.

```APIDOC
## recordAsync(options)

### Description
Starts recording a video that will be saved to cache directory.

### Parameters
- **options** (CameraRecordingOptions) - Optional - A map of CameraRecordingOptions type.

### Returns
- **Promise<undefined | { uri: string }>** - Resolves to an object containing video file uri.
```

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

### Install expo-sqlite

Source: https://docs.expo.dev/versions/v54.0.0/sdk/sqlite

Commands to install the expo-sqlite package using various package managers.

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

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

### FileSystem Legacy uploadAsync client example

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

Demonstrates how to upload a file to a remote server using the uploadAsync method with binary content type and PATCH method.

```js
import * as FileSystem from 'expo-file-system/legacy';

try {
  const response = await FileSystem.uploadAsync(`http://192.168.0.1:1234/binary-upload`, fileUri, {
    fieldName: 'file',
    httpMethod: 'PATCH',
    uploadType: FileSystem.FileSystemUploadType.BINARY_CONTENT,
  });
  console.log(JSON.stringify(response, null, 4));
} catch (error) {
  console.log(error);
}
```

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

### Install expo-notifications

Source: https://docs.expo.dev/versions/v54.0.0/sdk/notifications

Use the appropriate command for your package manager to install the expo-notifications library.

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

# yarn
yarn expo install expo-notifications

# pnpm
pnpm expo install expo-notifications

# bun
bun expo install expo-notifications
```

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

### Create recording with high quality preset

Source: https://docs.expo.dev/versions/v54.0.0/sdk/audio-av

Use createAsync with the HIGH_QUALITY preset to start a recording.

```ts
try {
  const { recording: recordingObject, status } = await Audio.Recording.createAsync(
    Audio.RecordingOptionsPresets.HIGH_QUALITY
  );
  // You are now recording!
} catch (error) {
  // An error occurred!
}
```

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

### Install @shopify/react-native-skia

Source: https://docs.expo.dev/versions/v54.0.0/sdk/skia

Use the expo CLI to install the library using your preferred package manager.

```bash
# npm
npx expo install @shopify/react-native-skia

# yarn
yarn expo install @shopify/react-native-skia

# pnpm
pnpm expo install @shopify/react-native-skia

# bun
bun expo install @shopify/react-native-skia
```

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

### Install expo-web-browser

Source: https://docs.expo.dev/versions/v54.0.0/sdk/webbrowser

Commands to install the expo-web-browser package using various package managers.

```sh
# npm
npx expo install expo-web-browser

# yarn
yarn expo install expo-web-browser

# pnpm
pnpm expo install expo-web-browser

# bun
bun expo install expo-web-browser
```

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

### Install expo-task-manager

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

Commands to install the expo-task-manager package using various package managers.

```sh
# npm
npx expo install expo-task-manager

# yarn
yarn expo install expo-task-manager

# pnpm
pnpm expo install expo-task-manager

# bun
bun expo install expo-task-manager
```

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

### Install @expo/ui

Source: https://docs.expo.dev/versions/v54.0.0/sdk/ui/jetpack-compose

Commands to install the @expo/ui package using various package managers.

```sh
# npm
npx expo install @expo/ui

# yarn
yarn expo install @expo/ui

# pnpm
pnpm expo install @expo/ui

# bun
bun expo install @expo/ui
```

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

### Custom entry point configuration

Source: https://docs.expo.dev/versions/v54.0.0/sdk/expo

Configure a custom entry point by updating package.json and using registerRootComponent in the entry file.

```json
{
  "main": "src/main.jsx"
}
```

```jsx
import { registerRootComponent } from 'expo';
import { View } from 'react-native';

function App() {
  return <View />;
}

registerRootComponent(App);
```

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

### Install expo-symbols

Source: https://docs.expo.dev/versions/v54.0.0/sdk/symbols

Commands to install the expo-symbols package using various package managers.

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

# yarn
yarn expo install expo-symbols

# pnpm
pnpm expo install expo-symbols

# bun
bun expo install expo-symbols
```

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

### Install expo-server

Source: https://docs.expo.dev/versions/v54.0.0/sdk/server

Commands to install the expo-server package using various package managers.

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

# yarn
yarn expo install expo-server

# pnpm
pnpm expo install expo-server

# bun
bun expo install expo-server
```

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

### Basic GL usage

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

A complete example showing how to render a point using GLView, including shader compilation and program linking within the onContextCreate callback.

```jsx
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);

  // Create vertex shader (shape & position)
  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);

  // Create fragment shader (color)
  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);

  // Link together into a program
  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();
}
```
Tokens:
Raw