[🐛] Font settings aren't used in various mention components on Android

[statico]

🔥

Issue

Despite specifying a Stream theme like so:

import { DeepPartial, Theme } from "stream-chat-expo"

import theme from "./theme"

type CustomTheme = DeepPartial<Theme>

const FONT_REGULAR = { fontFamily: theme.fonts.body.regular } as const
const FONT_BOLD = { fontFamily: theme.fonts.body.bold } as const
const MARKDOWN_STYLE = {
  heading: FONT_REGULAR,
  text: FONT_REGULAR,
  mentions: FONT_REGULAR,
} as const

export const streamTheme: CustomTheme = {
  ...
  messageInput: {
    ...
    suggestions: {
      command: {
        args: FONT_REGULAR,
        title: FONT_REGULAR,
      },
      emoji: {
        text: FONT_REGULAR,
      },
      header: {
        title: FONT_REGULAR,
      },
      mention: {
        name: FONT_REGULAR,
        tag: FONT_REGULAR,
      },
    },
  },
  messageSimple: {
    card: {
      authorName: FONT_REGULAR,
      authorNameFooter: FONT_REGULAR,
      footer: {
        description: FONT_REGULAR,
        title: FONT_REGULAR,
      },
      playButtonStyle: {
        durationTextStyle: FONT_REGULAR,
      },
    },
    container: {
      paddingHorizontal: theme.spacing.sm,
    },
    content: {
      markdown: MARKDOWN_STYLE,
      deletedMetaText: FONT_REGULAR,
      deletedText: MARKDOWN_STYLE,
      messageUser: FONT_REGULAR,
      metaText: FONT_REGULAR,
      textContainer: {
        maxWidth: 300, // Default of 250 is too narrow
        onlyEmojiMarkdown: MARKDOWN_STYLE,
      },
    },
...

Elements in Stream components related to mentions fail to pick up our custom font, but only on Android:

Steps to reproduce

Steps to reproduce the behavior:

1. Specify a theme with the above keys using an obvious custom font
2. Attempt to do an @ mention while chatting
3. Observe that the fonts are wrong on Android but correct on iOS

Expected behavior

The custom font styling should be the same on both platforms.

Environment

Click To Expand

package.json:

{
  "dependencies": {
    "@clerk/clerk-expo": "1.1.4",
    "@clerk/clerk-js": "5.4.0",
    "@stream-io/flat-list-mvcp": "^0.10.3",
    "expo": "51.0.5",
    "expo-application": "5.9.1",
    "expo-auth-session": "5.5.2",
    "expo-av": "14.0.4",
    "expo-camera": "15.0.8",
    "expo-clipboard": "6.0.3",
    "expo-constants": "16.0.1",
    "expo-contacts": "13.0.3",
    "expo-crypto": "13.0.2",
    "expo-dev-client": "4.0.13",
    "expo-device": "6.0.2",
    "expo-document-picker": "12.0.1",
    "expo-file-system": "17.0.1",
    "expo-font": "12.0.5",
    "expo-haptics": "13.0.1",
    "expo-image": "1.12.9",
    "expo-image-manipulator": "12.0.5",
    "expo-image-picker": "15.0.4",
    "expo-insights": "~0.7.0",
    "expo-linear-gradient": "~13.0.2",
    "expo-linking": "6.3.1",
    "expo-localization": "15.0.3",
    "expo-location": "17.0.1",
    "expo-media-library": "16.0.3",
    "expo-network": "6.0.1",
    "expo-notifications": "0.28.9",
    "expo-router": "3.5.12",
    "expo-secure-store": "13.0.1",
    "expo-sharing": "12.0.1",
    "expo-splash-screen": "0.27.4",
    "expo-status-bar": "1.12.1",
    "expo-store-review": "7.0.2",
    "expo-task-manager": "11.8.1",
    "expo-updates": "0.25.11",
    "expo-web-browser": "13.0.3",
    "metro": "0.80.9",
    "metro-resolver": "0.80.9",
    "metro-runtime": "0.80.9",
    "react": "18.3.1",
    "react-content-loader": "7.0.0",
    "react-dom": "18.3.1",
    "react-error-boundary": "4.0.13",
    "react-native": "0.74.1",
    "react-native-base64": "0.2.1",
    "react-native-date-picker": "5.0.2",
    "react-native-dialog": "9.3.0",
    "react-native-draggable-flatlist": "4.0.1",
    "react-native-flex-layout": "0.1.5",
    "react-native-gesture-handler": "2.16.2",
    "react-native-keyboard-aware-scroll-view": "0.9.5",
    "react-native-maps": "1.15.1",
    "react-native-mmkv": "2.12.2",
    "react-native-popup-menu": "0.16.1",
    "react-native-qrcode-svg": "^6.3.1",
    "react-native-reanimated": "3.10.1",
    "react-native-reanimated-confetti": "1.2.0",
    "react-native-restart": "0.0.27",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-svg": "15.3.0",
    "react-native-swipe-list-view": "3.2.9",
    "react-native-web": "0.19.11",
    "react-native-web-swiper": "2.2.4",
    "react-native-webview": "13.10.2",
    "react-test-renderer": "18.3.1",
    "rn-range-slider": "2.2.2",
    "stream-chat": "8.32.0",
    "stream-chat-expo": "5.30.0",
  },
  "devDependencies": {
    "@babel/core": "7.24.5",
    "@babel/plugin-transform-flow-strip-types": "7.24.1",
    "@clerk/types": "4.4.0",
    "@testing-library/jest-dom": "6.4.5",
    "@testing-library/jest-native": "5.4.3",
    "@testing-library/react": "15.0.7",
    "@testing-library/react-native": "12.5.0",
    "@types/react": "18.3.2",
    "@types/react-native-base64": "0.2.2",
    "@typescript-eslint/eslint-plugin": "7.9.0",
    "@typescript-eslint/parser": "7.9.0",
    "eslint": "8.57.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-import": "2.29.1",
    "eslint-plugin-react": "7.34.1",
    "eslint-plugin-simple-import-sort": "12.1.0",
    "jest-expo": "51.0.1"
  }
}

react-native info output:

System:
  OS: macOS 14.6.1
  CPU: (12) arm64 Apple M2 Max
  Memory: 392.00 MB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.13.1
    path: ~/.nvm/versions/node/v20.13.1/bin/node
  Yarn: Not Found
  npm:
    version: 10.8.1
    path: ~/.nvm/versions/node/v20.13.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11842104
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.2
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/xxxxxx/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.75.2 is now available (your project is running on v0.74.1).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.75.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.1&to=0.75.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

• Platform that you're experiencing the issue on:
  • [ ] iOS
  • [x] Android
  • [ ] iOS but have not tested behavior on Android
  • [ ] Android but have not tested behavior on iOS
  • [ ] Both
• stream-chat-react-native version you're using that has this issue:
  • "stream-chat-expo": "5.30.0",
• Device/Emulator info:
  • [x] I am using a physical device (and simulator)
  • OS version: Android 14
  • Device/Emulator: Android 14