useTrackTranscription equivalent for react native?

[kotani123]

I wanted to know if there was a useTrackTranscription equivalent for the react native package. The agent-playground uses this to display the chat messages for both the user and the agent.

I wanted to know if there was a built in way of achieving the same thing in a react-native app.

[davidliu]

I think it might be fine to use the components-react hook? Can't test at the moment, but it's worth trying it out yourself. If it works, I'll add it to our list of exports.

[kotani123]

Thank you so much! I will try it out!

[goatandsheep]

is this pertaining to closed captions / subtitles?

[tarikozket]

the @livekit/react-native doesn't export the necessary useTrackTranscription hook. you need to add @livekit/components-react to your react native project and import it from there. once imported, you can use it like in the following:

  const { isMicrophoneEnabled, localParticipant, microphoneTrack } = useLocalParticipant();

  const localMessages = useTrackTranscription({
    publication: microphoneTrack,
    source: Track.Source.Microphone,
    participant: localParticipant,
  });

here is an example from the playground's source code.

[davidliu]

@tarikozket hey, can you confirm if this works for you? I never got around to testing this myself, but if it works, I can add it to this library's export list (not all of the component-react hooks work, so we re-export to keep a confirmed list of working hooks).

[tarikozket]

yup, it does 👍