A [`SharedObject`](#sharedobjecttype) 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`](https://developer.android.com/reference/android/graphics/drawable/Drawable) on Android and an [`UIImage`](https://developer.apple.com/documentation/uikit/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.
SharedRefType Properties
### `nativeRefType`
Supported platforms: Android, iOS, tvOS, Web.
Type: `string`
The type of the native reference.
## Methods
### `installOnUIRuntime()`
Supported platforms: Android, iOS, tvOS, Web.
Returns: `void`
### `isRunningInExpoGo()`
Supported platforms: Android, iOS, tvOS, Web.
Returns a boolean value whether the app is running in Expo Go.
Returns: `boolean`
### `registerRootComponent(component)`
Supported platforms: Android, iOS, tvOS, Web.
| Parameter | Type | Description |
| --- | --- | --- |
| `component` | `ComponentType` | 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.
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`
> **See:** For information on how to setup `registerRootComponent` in an existing (bare) React Native app, see [Common questions](#rootregistercomponent-setup-for-existing-react-native-projects) below.
### `registerWebModule(moduleImplementation, moduleName)`
Supported platforms: Android, iOS, tvOS, Web.
| Parameter | Type | Description |
| --- | --- | --- |
| `moduleImplementation` | `ModuleType` | A class that extends `NativeModule`. The class is registered under `globalThis.expo.modules[className]`. |
| `moduleName` | `string` | A name to register the module under `globalThis.expo.modules[className]`. |
Registers a web module.
Returns: `ModuleType`
A singleton instance of the class passed into arguments.
### `reloadAppAsync(reason)`
Supported platforms: Android, iOS, tvOS, Web.
| Parameter | 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()`](/versions/latest/sdk/updates#updatesreloadasync), 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`
### `requireNativeModule(moduleName)`
Supported platforms: Android, iOS, tvOS, Web.
| Parameter | 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.
Returns: `ModuleType`
Object representing the native module.
### `requireNativeView(moduleName, viewName)`
Supported platforms: Android, iOS, tvOS, Web.
| Parameter | Type |
| --- | --- |
| `moduleName` | `string` |
| `viewName`(optional) | `string` |
A drop-in replacement for `requireNativeComponent`.
Returns: `ComponentType`
### `requireOptionalNativeModule(moduleName)`
Supported platforms: Android, iOS, tvOS, Web.
| Parameter | 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.
Returns: `ModuleType | null`
Object representing the native module or `null` when it cannot be found.
## Event Subscriptions
### `useEventListener(eventEmitter, eventName, listener)`
Supported platforms: Android, iOS, tvOS, Web.
| Parameter | Type | Description |
| --- | --- | --- |
| `eventEmitter` | [EventEmitter](/versions/v55.0.0/sdk/expo#eventemittertype) | An object that emits events. For example, a native module or shared object or an instance of [`EventEmitter`](#eventemittertype). |
| `eventName` | `TEventName` | Name of the event to listen to. |
| `listener` | `TEventListener` | 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
```tsx
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 ;
}
```
## Types
## Common questions
Some common questions about using the `expo` package in your project.
`rootRegisterComponent` setup for existing React Native projects
If you are managing your React Native project's native directories (**android** and **ios**) manually, you need to follow the instructions below to set up the `registerRootComponent` function. This is necessary for the Expo modules to work correctly.
**Android**
Update the **android/app/src/main/your-package/MainActivity.java** file to use the name `main` in the `getMainComponentName` function.
```diff
@Override
protected String getMainComponentName() {
+ return "main";
}
```
**iOS**
Update the iOS **ios/your-project/AppDelegate.(m|mm|swift)** file to use the **moduleName** `main` in the `createRootViewWithBridge:bridge moduleName:@"main" initialProperties:initProps` line of the `application:didFinishLaunchingWithOptions:` function.
What if I want to name my main app file something other than App.js or app/_layout.tsx?
**For projects that do not use [Expo Router](/router/introduction)**, 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 for the app if you are using a custom entry file.
For example, let's say you want to make **src/main.jsx** the entry file for your app — maybe you don't like having JavaScript files in the project root. First, set this in **package.json**:
```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:
```jsx
import { registerRootComponent } from 'expo';
import { View } from 'react-native';
function App() {
return ;
}
registerRootComponent(App);
```
**For projects that use [Expo Router](/router/introduction)**, you can create a custom entry point by following these steps from [Expo Router's installation guide](/router/installation#custom-entry-point-to-initialize-and-load). To use the top-level **src** directory in your Expo Router project, see [src directory reference](/router/reference/src-directory) for more information.