Chat Component Availability for React Native/Expo ...
# ask-ai
j
Chat Component Availability for React Native/Expo Applications** --- Hi LiveKit team, I'm building a React Native/Expo application using LiveKit for voice conversations with AI agents. I'd like to add real-time chat functionality alongside the voice features but need clarification on the best approach for React Native. ## Current Setup - Platform: React Native with Expo - LiveKit packages: - `@livekit/react-native`: ^2.7.6 - `livekit-client`: ^2.15.3 - Current functionality: Voice conversations with AI agents working perfectly - Voice features: Push-to-talk, live voice, conversation transcripts ## Questions ### 1. Chat Components for React Native I see that
@livekit/components-react
has a
<Chat />
component, but this appears to be web-only. Is there a React Native equivalent of the Chat component? Or do you recommend a specific approach for implementing chat in React Native applications? ### 2. React Native Chat Implementation Options If there's no built-in React Native chat component, what's the recommended approach: A) Custom chat UI using LiveKit's DataChannel for real-time messaging? B) Use room.sendData() and listen for data messages manually? C) Different pattern altogether for React Native chat? ### 3. Chat + Voice Integration For an application that combines voice conversations with occasional text chat: - Best practices for UI/UX when mixing voice and chat? - Message persistence - should chat messages be handled separately from voice transcripts? - Performance considerations when running both voice and chat simultaneously? ### 4. Expo Compatibility Are there any specific considerations or limitations when implementing chat functionality in an Expo-managed React Native application? ## Use Case Context We're building a mental health reflection app where users primarily interact via voice with an AI companion. We'd like to add optional text chat during voice sessions for: - Sharing links or resources - Brief clarifications during voice conversations - Backup communication when voice quality is poor The chat would be supplementary to voice, not the primary interaction method. ## Example Code Structure Currently using voice like this:
Copy code
typescript
_// Voice session setup_
const room = new Room({
  adaptiveStream: true,
  dynacast: true,
  audioCaptureDefaults: {
    autoGainControl: true,
    echoCancellation: true,
    noiseSuppression: true,
  },
});

await room.connect(livekitUrl, token);

_// Would like to add chat functionality here_
Any guidance on the best approach for React Native chat integration would be greatly appreciated! ## Environment Details - React Native: 0.79.3 - Expo SDK: 53.0.9 - Platform targets: iOS and Android - LiveKit server: Cloud-hosted Thank you for your excellent documentation and support!
t
Thanks for reaching out, Albert. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
I don't have the answer you're looking for. You could also try asking your question: • in one of the other Slack channels or • to https://deepwiki.com/livekit/livekit_composite which is trained on all LiveKit source code If you find the answer, please post it here to help others!