Getting started with React Native apps on Meta Horizon OS

1. Set up the platform integration using the expo-horizon-core⁠ library and config plugin.
2. Migrate or adjust your libraries to versions that support Meta Horizon OS (only a few, like expo-location and expo-notifications, require special handling — see the unsupported dependencies list).

1. Install the core library.

   npm install expo-horizon-core
   # or
   yarn add expo-horizon-core
   
2. Add the following configuration to either your app.json or app.config.js/app.config.ts file to enable the expo-horizon-core config plugin.

   {
     "expo": {
       "plugins": [
         [
           "expo-horizon-core",
           {
             "horizonAppId": "DEMO_APP_ID",
             "defaultHeight": "640dp",
             "defaultWidth": "1024dp",
             "supportedDevices": "quest2|quest3|quest3s",
             "disableVrHeadtracking": false,
             "orientation": "default"
           }
         ]
       ]
     }
   }
   
   For a complete list of options and configuration details, see the expo-horizon-core documentation⁠.
   For more granular control over the screen orientation, use Expo’s ScreenOrientation⁠ package.
3. Run this command to clean up your existing directories based on your app configuration file and then create a new prebuild.

   expo prebuild --clean
   
4. Use Android product flavors to build for Quest or mobile. To select a target platform you need to use the correct build variant. For example, in package.json you can use:

   {
     "scripts": {
       "prebuild": "expo prebuild",
       "android": "expo run:android --variant mobileDebug",
       "quest": "expo run:android --variant questDebug",
       "android:release": "expo run:android --variant mobileRelease",
       "quest:release": "expo run:android --variant questRelease"
     }
   }
   
   Alternatively, you can select and run the variants in the Android Studio using the Build Variants menu.

1. Install the package.

    npx expo install expo-horizon-location
   
2. Remove the old expo-location package.
3. Update your app configuration by replacing the expo-location config plugin with expo-horizon-location.
4. Run the app using the selected flavor: yarn mobile / yarn quest.
5. Update your imports.

    // import * as Location from 'expo-location';
    import * as Location from 'expo-horizon-location';
   

1. Install the package.

    npx expo install expo-horizon-notifications
    # and remove the old package:
    npm uninstall expo-notifications
    # or
    yarn remove expo-notifications
   
2. Update your app.json/app.config.js to replace expo-notifications with expo-horizon-notifications.
3. Use the questDebug or questRelease build variant to run the app on Meta Quest devices. See expo-horizon-core⁠ for more details.
4. Update your imports:

    // import notifications package
    import * as Notifications from 'expo-horizon-notifications';
   

1. Add the expo-iap plugin to the plugins array of either your app.json or app.config.js/app.config.ts file.

       [
       'expo-iap',
       {
           modules: {
           horizon: true, // Enable Horizon OS support
           },
           android: {
           horizonAppId: 'YOUR_HORIZON_APP_ID', // Required: Your Horizon App ID
           },
       },
       ],
   
   Your full configuration file should look like this.

   export default {
   expo: {
       plugins: [
       [
           "expo-horizon-core",
           {
           horizonAppId: "DEMO_APP_ID", // Replace with your actual Horizon App ID if needed
           defaultHeight: "640dp",
           defaultWidth: "1024dp",
           supportedDevices: "quest2|quest3|quest3s",
           disableVrHeadtracking: false,
           },
       ],
       [
           "expo-iap",
           {
           modules: {
               horizon: true, // Enable Horizon OS support
           },
           android: {
               horizonAppId: "YOUR_HORIZON_APP_ID", // Required: Your Horizon App ID
           },
           },
       ],
       ],
   },
   };
   

• To learn more about how designing for Quest is different than designing for mobile, see the design guidelines.
• To understand how to adjust your UI for maximum usability on Quest, see Hit targets, navigation, and typography.

• Publish your app to the Meta Quest Store.