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

📘

Icons and fonts accessed through packages

If your app utilizes any icons or fonts from third party packages you will need to add those font files to the correct directory (i.e. android/app/src/main/assets/fonts) so that the font files can be uploaded for replay. For example, if you use symbols from a package such as react-native-vector-icons you can copy all of the files in the Fonts directory of the package into android/app/src/main/assets/fonts and the custom font upload workflow should utilize those files to display the correct icons during replay.

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>,
              "assetDirs": <ARRAY_OF_DIRECTORIES>
            }
          }
        }
      ]
    ]
  }
}

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>,
              assetDirs: <ARRAY_OF_DIRECTORIES>
            }
          },
        },
      ],
    ],
  },
};

• android.assetCapture.apiKey - REQUIRED - The API key found in General Settings > Development > API key within the corresponding LogRocket project
• android.assetCapture.enabledVariants - OPTIONAL - An array of build variants that should have custom font support enabled. Defaults to ["release"]
• android.assetCapture.assetDirs - OPTIONAL - An array of paths to folders that should be checked for font resources to upload. By default LogRocket checks app/src/main/res/font and app/src/main/assets so those directories don't need to be added to this configuration setting.

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. If more than one directory contains custom fonts for the application then list all directory paths with a space between each path
• ios.assetCapture.cliPath - OPTIONAL - Path to where the LogRocket CLI was 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"]

Building with EAS

If you are using the Expo Application Service (EAS) to build and deploy your iOS mobile app then you will need to take an additional step to ensure the LogRocket CLI is available to EAS during the build process. To do this include the LogRocket CLI executable in your Expo project (ex. at /utils/logrocket-cli) so that it gets included in the project archive that gets uploaded to EAS for the build. Then just make sure to reference the CLI using a path relative to the ios folder when defining cliPath in the configuration (ex. ../utils/logrocket-cli).