@fen-kit/react-native

A small, drop-in LiveKit audio-calling SDK for React Native: a connection hook (useFenCall) and a ready-made call screen (CallRoom). Not fancy on purpose — connect, see who's on the call, mute, leave.

npm package →

What this does NOT do

• No token minting — you fetch wsUrl/token from your own backend and pass them to join(). Issuing LiveKit tokens requires your API secret, which must never ship inside a published npm package.
• No native call UI (CallKit/ConnectionService), no VoIP push, no ringing-while-backgrounded. That's backend + native-module territory specific to your app, not something a package like this can own.
• No video. This is scoped to audio, matching what was asked for.

Install

npm install @fen-kit/react-native livekit-client @livekit/react-native @livekit/react-native-webrtc

Then follow LiveKit's React Native setup for the native config (react-native-webrtc needs a few native permissions/entitlements on both platforms) — see https://docs.livekit.io/home/quickstarts/react-native/

Important: call registerGlobals() once, before any LiveKit code runs — typically at the top of your app's entry file:

import { registerGlobals } from "@livekit/react-native";
registerGlobals();

Usage

import { useFenCall, CallRoom } from "@fen-kit/react-native";

export function CallScreen({ wsUrl, token }: { wsUrl: string; token: string }) {
  const call = useFenCall();

  useEffect(() => {
    call.join(wsUrl, token);
    return () => {
      call.leave();
    };
  }, [wsUrl, token]);

  return (
    <CallRoom
      participants={call.participants}
      connectionState={call.connectionState}
      duration={call.duration}
      isMuted={call.isMuted}
      isSpeakerOn={call.isSpeakerOn}
      onToggleMute={call.toggleMute}
      onToggleSpeaker={call.toggleSpeaker}
      onLeave={call.leave}
    />
  );
}

Or build your own layout with the pieces:

import {
  ParticipantCard,
  ControlButton,
  useFenCall,
} from "@fen-kit/react-native";

// call.participants.map(p => <ParticipantCard participant={p} />)
// <ControlButton label="Mute" active={call.isMuted} onPress={call.toggleMute} />

API

useFenCall() returns:

• participants: FenParticipant[] — { id, name, isLocal, isMuted, isSpeaking, isConnected }
• connectionState: "idle" | "connecting" | "connected" | "reconnecting" | "disconnected"
• duration: number — seconds since connecting
• isMuted, isSpeakerOn: boolean
• join(wsUrl, token), leave(), toggleMute(), toggleSpeaker()

<CallRoom /> — full call screen; takes the values above as props, plus optional getAvatarUrl?: (participantId) => string | null.

<ParticipantCard />, <ControlButton />, <SpeakingWave /> — the individual pieces CallRoom is built from, for custom layouts.

Publishing updates

The fen-kit npm org and this package name are already set up. To ship a new version:

npm version patch   # or minor / major
npm publish --access public