If you use custom fonts in Android or iOS, and notice missing icons or incorrectly sized text in Session Replay, you may want to follow these instructions to upload your fonts on release builds. This will enable custom fonts to display in Session Replay. Custom font replay using the LogRocket Expo plugin requires a minimum SDK version of 1.37.1.

All of the steps below assume that you have already installed the LogRocket SDK

Android

Configure the plugin

In your app.json or (app.config.js) add the following configuration for the LogRocket plugin:

{
  "expo": {
    "plugins": [
      // ... your other existing plugins
      [
        "@logrocket/react-native",
      	{
          // ... your other existing LogRocket plugin settings
          "android": {
            "assetCapture": {
              "apiKey": "<PROJECT_API_KEY>",
              "enabledVariants": <ARRAY_OF_BUILD_VARIANTS>
            }
          }
        }
      ]
    ]
  }
}

export default {
  expo: {
    plugins: [
      // ... your other existing plugins
      [
        '@logrocket/react-native',
        {
          // ... your other existing LogRocket plugin settings
          android: {
            assetCapture: {
              apiKey: "<PROJECT_API_KEY>",
              enabledVariants: <ARRAY_OF_BUILD_VARIANTS>
            }
          },
        },
      ],
    ],
  },
};

• android.assetCapture.apiKey - REQUIRED - The API key found in General Settings > Development > API key within the corresponding LogRocket project
• android.asssetCapture.enabledVariants - OPTIONAL - An array of build variants that should have custom font support enabled. Defaults to ["release"]

Font resource location

For React Native we capture fonts that have been installed into the Android application at android/app/src/main/assets/fonts. In order to ensure font files are installed in that location you need to use the expo-font config plugin instead of the useFonts hook.

iOS

Get the logrocket-cli binary

Follow the steps specified in the iOS custom font capture documentation to download the LogRocket CLI and make it globally available for executation.

Configure the plugin

In your app.json or (app.config.js) add the following configuration for the LogRocket plugin:

{
  "expo": {
    "plugins": [
      // ... your other existing plugins
      [
        "@logrocket/react-native",
      	{
          // ... your other existing LogRocket plugin settings
          "ios": {
            "assetCapture": {
              "apiKey": "<PROJECT_API_KEY>",
              "assetDirectory": "<ASSET_DIRECTORY_PATH>",
              "cliPath": "<CLI_PATH>",
              "enabledBuildConfigs": <ARRAY_OF_BUILD_CONFIGS>
            }
          }
        }
      ]
    ]
  }
}

export default {
  expo: {
    plugins: [
      // ... your other existing plugins
      [
        '@logrocket/react-native',
        {
          // ... your other existing LogRocket plugin settings
          android: {
            assetCapture: {
              apiKey: "<PROJECT_API_KEY>",
              assetDirectory: "<ASSET_DIRECTORY_PATH>",
              cliPath: "<CLI_PATH>",
              enabledBuildConfigs: <ARRAY_OF_BUILD_CONFIGS>
            }
          },
        },
      ],
    ],
  },
};

• ios.assetCapture.apiKey - REQUIRED - The API key found in General Settings > Development > API key within the corresponding LogRocket project
• ios.assetCapture.assetDirectory - REQUIRED - The path to the directory in which all custom fonts for the application can be found.
• ios.assetCapture.cliPath - OPTIONAL - Path to where the LogRocket CLI was installed installed. NOTE: If you didn't add the CLI to your PATH environment variable then this setting is REQUIRED.
• ios.assetCapture.enabledBuildConfigs - OPTIONAL - An array of build configurations that should have custom font support enabled. Defaults to ["Release"]