[🐛] 🔥 Missing incoming/outgoing semantics prop for audio message components

[jcmartel-spordle]

Issue

When implementing the chat view in my app, I noticed the audio message components are missing incoming/outgoing properties within the semantics object. For example, to change the chat bubble background color, there's chatBgIncoming and chatBgOutgoing to change the message bubble of received messages and sent messages respectively. However, audio messages use the same semantics prop for both incoming and outgoing messages (chatWaveformBarPlaying for the waveform, textSecondary for the play/pause icon, etc.).

This is an issue when updating the chat bubble background color to differentiate incoming/outgoing messages. For example, if I were to leave the incoming messages background color to the default (light gray) and change the background color of outgoing messages to red, I want to update the outgoing messages content to a lighter color to have a proper contrast (white in this instance). However, with how the semantics properties are used within audio message components, changing them to white would also change the incoming audio messages to white components. White content on a light background isn't great. And conversely, leaving the audio message components with darker colors make them look odd on darker backgrounds. I provided a screenshot below to illustrate my examples.

Steps to reproduce

Steps to reproduce the behavior:

N/A

Expected behavior

I'm expecting to have incoming/outgoing semantics props for the audio message components (content in AudioAttachment.tsx).

Project Related Information

Customization

Click To Expand

# N/A

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

# N/A

react-native info output:

System:
  OS: macOS 26.5.2
  CPU: (14) arm64 Apple M4 Pro
  Memory: 480.34 MB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.18.0
    path: /Users/jcmartel/.nvm/versions/node/v24.18.0/bin/node
  Yarn: Not Found
  npm:
    version: 12.0.1
    path: /Users/jcmartel/.nvm/versions/node/v24.18.0/bin/npm
  Watchman:
    version: 2025.12.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.4
      - iOS 26.4
      - macOS 26.4
      - tvOS 26.4
      - visionOS 26.4
      - watchOS 26.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.27397.103.2522.14514259
  Xcode:
    version: 26.4.1/17E202
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.17
    path: /usr/bin/javac
  Ruby:
    version: 3.4.7
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.2.0
    wanted: ^20.2.0
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.85.3
    wanted: 0.85.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

• Platform that you're experiencing the issue on:
  • iOS
  • 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:
  • 9.7.1 (technically using stream-chat-expo)
• Device/Emulator info:
  • I am using a physical device
  • OS version: iOS 26.2
  • Device/Emulator: iPhone 17 Pro

Additional context

Screenshots

Click To Expand

---

[szuperaz]

Thanks for reporting this issue. We're taking a look and will get back to you shortly

[szuperaz]

An update on this: there are a few small things in the SDK's theming that cause issues when someone wants to use different text colors for incoming and outgoing bubbles. We're fixing them all and will let you know once the fixes are released.