Set of common methods and types for Expo and related packages.

Android
iOS
tvOS
Web

Installation

Terminal
- npx expo install expo

API

import * as Expo from 'expo';

expo/fetch API

expo/fetch provides a WinterCG-compliant Fetch API that works consistently across web and mobile environments, ensuring a standardized and cross-platform fetch experience within Expo applications.

Streaming fetch
import { fetch } from 'expo/fetch';

const resp = await fetch('https://httpbin.org/drip?numbytes=512&duration=2', {
  headers: { Accept: 'text/event-stream' },
});
const reader = resp.body.getReader();
const chunks = [];
while (true) {
  const { done, value } = await reader.read();
  if (done) {
    break;
  }
  chunks.push(value);
}
const buffer = new Uint8Array(chunks.reduce((acc, chunk) => acc + chunk.length, 0));
console.log(buffer.length); // 512

Constants

Android
iOS
tvOS
Web

SharedRef

Type: SharedRefType

Hooks

Android
iOS
tvOS
Web

useEvent(eventEmitter, eventName, initialValue)

ParameterTypeDescription
eventEmitterEventEmitter<TEventsMap>

An object that emits events. For example, a native module or shared object or an instance of EventEmitter.

eventNameTEventName

Name of the event to listen to.

initialValue
(optional)
null | TInitialValue

An event parameter to use until the event is called for the first time.

Default:null

React hook that listens to events emitted by the given object. The returned value is an event parameter that gets updated whenever a new event is dispatched.

Returns:

InferEventParameter<TEventListener, TInitialValue>

A parameter of the event listener.

Example

import { useEvent } from 'expo';
import { VideoPlayer } from 'expo-video';

export function PlayerStatus({ videoPlayer }: { videoPlayer: VideoPlayer }) {
  const { status } = useEvent(videoPlayer, 'statusChange', { status: videoPlayer.status });

  return <Text>{`Player status: ${status}`}</Text>;
}
Android
iOS
tvOS
Web

useEventListener(eventEmitter, eventName, listener)

ParameterTypeDescription
eventEmitterEventEmitter<TEventsMap>

An object that emits events. For example, a native module or shared object or an instance of EventEmitter.

eventNameTEventName

Name of the event to listen to.

listenerTEventListener

A function to call when the event is dispatched.


React hook that listens to events emitted by the given object and calls the listener function whenever a new event is dispatched. The event listener is automatically added during the first render and removed when the component unmounts.

Returns:

void

Example

import { useEventListener } from 'expo';
import { useVideoPlayer, VideoView } from 'expo-video';

export function VideoPlayerView() {
  const player = useVideoPlayer(videoSource);

  useEventListener(player, 'playingChange', ({ isPlaying }) => {
    console.log('Player is playing:', isPlaying);
  });

  return <VideoView player={player} />;
}

Classes

Android
iOS
tvOS
Web

EventEmitter

A class that provides a consistent API for emitting and listening to events. It shares many concepts with other emitter APIs, such as Node's EventEmitter and fbemitter. When the event is emitted, all of the functions attached to that specific event are called synchronously. Any values returned by the called listeners are ignored and discarded. Its implementation is written in C++ and common for all the platforms.

EventEmitter Methods

Android
iOS
tvOS
Web

addListener(eventName, listener)

ParameterType
eventNameEventName
listenerTEventsMap[EventName]

Adds a listener for the given event name.

Returns:

EventSubscription

Android
iOS
tvOS
Web

emit(eventName, ...args)

ParameterType
eventNameEventName
...argsParameters<TEventsMap[EventName]>

Synchronously calls all of the listeners attached to that specific event. The event can include any number of arguments that will be passed to the listeners.

Returns:

void

Android
iOS
tvOS
Web

listenerCount(eventName)

ParameterType
eventNameEventName

Returns a number of listeners added to the given event.

Returns:

number

Android
iOS
tvOS
Web

removeAllListeners(eventName)

ParameterType
eventNamekeyof undefined

Removes all listeners for the given event name.

Returns:

void

Android
iOS
tvOS
Web

removeListener(eventName, listener)

ParameterType
eventNameEventName
listenerTEventsMap[EventName]

Removes a listener for the given event name.

Returns:

void

Android
iOS
tvOS
Web

startObserving(eventName)

ParameterType
eventNameEventName

Function that is automatically invoked when the first listener for an event with the given name is added. Override it in a subclass to perform some additional setup once the event started being observed.

Returns:

void

Android
iOS
tvOS
Web

stopObserving(eventName)

ParameterType
eventNameEventName

Function that is automatically invoked when the last listener for an event with the given name is removed. Override it in a subclass to perform some additional cleanup once the event is no longer observed.

Returns:

void

Android
iOS
tvOS
Web

NativeModule

Type: Class extends EventEmitter<TEventsMap>

A class for all native modules. Extends the EventEmitter class.

Android
iOS
tvOS
Web

SharedObject

Type: Class extends EventEmitter<TEventsMap> implements EventEmitter<TEventsMap>

Base class for all shared objects that extends the EventEmitter class. The implementation is written in C++, installed through JSI and common for mobile platforms.

SharedObject Methods

Android
iOS
tvOS
Web

release()

A function that detaches the JS and native objects to let the native object deallocate before the JS object gets deallocated by the JS garbage collector. Any subsequent calls to native functions of the object will throw an error as it is no longer associated with its native counterpart.

In most cases, you should never need to use this function, except some specific performance-critical cases when manual memory management makes sense and the native object is known to exclusively retain some native memory (such as binary data or image bitmap). Before calling this function, you should ensure that nothing else will use this object later on. Shared objects created by React hooks are usually automatically released in the effect's cleanup phase, for example: useVideoPlayer() from expo-video and useImage() from expo-image.

Returns:

void

Android
iOS
tvOS
Web

SharedRef

Type: Class extends SharedObject<TEventsMap> implements SharedObject<TEventsMap>

A SharedObject that holds a reference to any native object. Allows passing references to native instances among different independent libraries.

For instance, ImageRef from expo-image references a Drawable on Android and an UIImage on iOS. Since both types are common on these platforms, different native modules can use them without depending on each other. In particular, this enables the expo-image-manipulator to pass the resulted image directly to the image view from expo-image without any additional writes and reads from the file system.

SharedRef Properties

Android
iOS
tvOS
Web

nativeRefType

Type: string

The type of the native reference.

Methods

Android
iOS
tvOS
Web

isRunningInExpoGo()

Returns a boolean value whether the app is running in Expo Go.

Returns:

boolean

Android
iOS
tvOS
Web

registerRootComponent(component)

ParameterTypeDescription
componentComponentType<P>

The React component class that renders the rest of your app.


Sets the initial React component to render natively in the app's root React Native view on Android, iOS, tvOS and the web.

This method does the following:

  • Invokes React Native's AppRegistry.registerComponent.
  • Invokes React Native web's AppRegistry.runApplication on web to render to the root index.html file.
  • Polyfills the process.nextTick function globally.
  • Adds support for using the fontFamily React Native style with the expo-font package.

This method also adds the following dev-only features that are removed in production bundles.

  • Adds the Fast Refresh and bundle splitting indicator to the app.
  • Asserts if the expo-updates package is misconfigured.
  • Asserts if react-native is not aliased to react-native-web when running in the browser.
Returns:

void

Android
iOS
tvOS
Web

reloadAppAsync(reason)

ParameterTypeDescription
reason
(optional)
string

The reason for reloading the app. This is used only for some platforms.


Reloads the app. This method works for both release and debug builds.

Unlike Updates.reloadAsync(), this function does not use a new update even if one is available. It only reloads the app using the same JavaScript bundle that is currently running.

Returns:

Promise<void>

Android
iOS
tvOS
Web

requireNativeModule(moduleName)

ParameterTypeDescription
moduleNamestring

Name of the requested native module.


Imports the native module registered with given name. In the first place it tries to load the module installed through the JSI host object and then falls back to the bridge proxy module. Notice that the modules loaded from the proxy may not support some features like synchronous functions.

Returns:

ModuleType

Object representing the native module.

Android
iOS
tvOS
Web

requireOptionalNativeModule(moduleName)

ParameterTypeDescription
moduleNamestring

Name of the requested native module.


Imports the native module registered with the given name. The same as requireNativeModule, but returns null when the module cannot be found instead of throwing an error.

Returns:

ModuleType | null

Object representing the native module or null when it cannot be found.

Event Subscriptions

Android
iOS
tvOS
Web

useEventListener(eventEmitter, eventName, listener)

ParameterTypeDescription
eventEmitterEventEmitter<TEventsMap>

An object that emits events. For example, a native module or shared object or an instance of EventEmitter.

eventNameTEventName

Name of the event to listen to.

listenerTEventListener

A function to call when the event is dispatched.


React hook that listens to events emitted by the given object and calls the listener function whenever a new event is dispatched. The event listener is automatically added during the first render and removed when the component unmounts.

Returns:

void

Example

import { useEventListener } from 'expo';
import { useVideoPlayer, VideoView } from 'expo-video';

export function VideoPlayerView() {
  const player = useVideoPlayer(videoSource);

  useEventListener(player, 'playingChange', ({ isPlaying }) => {
    console.log('Player is playing:', isPlaying);
  });

  return <VideoView player={player} />;
}

Common questions

What if I want to name my main app file something other than App.js?

You can set the "main" in package.json to any file within your project. If you do this, then you need to use registerRootComponent. The export default will not make this component the root of the app if you are using a custom entry file.

For example, you want to make src/main.jsx the entry file for your app and organize all of your app's source code in src directory. You can set this in package.json:

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

Then, in src/main.jsx, make sure you call registerRootComponent and pass in the component you want to render at the root of the app:

src/main.jsx
import { registerRootComponent } from 'expo';
import { View } from 'react-native';

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

registerRootComponent(App);