This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 51).
Set of common methods and types for Expo and related packages.
-
npx expo install expo
import * as Expo from 'expo';
useEvent<TEventsMap, TEventName, TEventListener, TInitialValue>(eventEmitter, eventName, initialValue)
Name | Type | Description |
---|---|---|
eventEmitter | EventEmitter<TEventsMap> | An object that emits events. For example, a native module or shared object or an instance of |
eventName | TEventName | 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.
A parameter of the event listener.
Example
import { useEvent } from 'expo';
import { VideoPlayer } from 'expo-video';
export function PlayerStatus({ videoPlayer }: { videoPlayer: VideoPlayer }) {
const playerStatus = useEvent(videoPlayer, 'statusChange', videoPlayer.status);
return <Text>{`Player status: ${playerStatus}`}</Text>;
}
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
addListener<EventName>(eventName, listener)
Name | Type |
---|---|
eventName | EventName |
listener | TEventsMap[EventName] |
Adds a listener for the given event name.
EventSubscription
emit<EventName>(eventName, ...args)
Name | Type |
---|---|
eventName | EventName |
...args | Parameters<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.
void
listenerCount<EventName>(eventName)
Name | Type |
---|---|
eventName | EventName |
Returns a number of listeners added to the given event.
number
removeAllListeners(eventName)
Name | Type |
---|---|
eventName | keyof TEventsMap |
Removes all listeners for the given event name.
void
removeListener<EventName>(eventName, listener)
Name | Type |
---|---|
eventName | EventName |
listener | TEventsMap[EventName] |
Removes a listener for the given event name.
void
startObserving<EventName>(eventName)
Name | Type |
---|---|
eventName | EventName |
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.
void
stopObserving<EventName>(eventName)
Name | Type |
---|---|
eventName | EventName |
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.
void
NativeModule
Type: Class extends EventEmitter<TEventsMap>
A class for all native modules. Extends the EventEmitter class.
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
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.
void
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.
isRunningInExpoGo()
Returns a boolean value whether the app is running in Expo Go.
boolean
registerRootComponent<P>(component)
Name | Type | Description |
---|---|---|
component | ComponentType<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:
AppRegistry.registerComponent
.AppRegistry.runApplication
on web to render to the root index.html
file.process.nextTick
function globally.fontFamily
React Native style with the expo-font
package.This method also adds the following dev-only features that are removed in production bundles.
expo-updates
package is misconfigured.react-native
is not aliased to react-native-web
when running in the browser.void
reloadAppAsync(reason)
Name | Type | Description |
---|---|---|
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.
Promise<void>
requireNativeModule<ModuleType>(moduleName)
Name | Type | Description |
---|---|---|
moduleName | string | 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.
ModuleType
Object representing the native module.
requireOptionalNativeModule<ModuleType>(moduleName)
Name | Type | Description |
---|---|---|
moduleName | string | 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.
ModuleType | null
Object representing the native module or null
when it cannot be found.
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:
{
"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:
import { registerRootComponent } from 'expo';
import { View } from 'react-native';
function App() {
return <View />;
}
registerRootComponent(App);