RtkSetupScreen

RealtimeKit provides a default pre-call preview UI, also known as setup screen as part of our UI components.

Previously in the Quickstart example, we used the following component.

<RtkMeeting meeting={meeting} showSetupScreen={true} />

If you want to break down the above for a custom UI but still want to reuse the default setup screen, use the following component.

import { RtkSetupScreen, RtkText } from '@cloudflare/realtimekit-react-native-ui';
import { useRealtimeKitMeeting, useRealtimeKitSelector } from '@cloudflare/realtimekit-react-native';

export default function MyMeeting() {
  const { meeting } = useRealtimeKitMeeting();
  const roomState = useRealtimeKitSelector((m) => m.self.roomState);

  return (
    <View>
      {roomState === 'init' && <RtkSetupScreen meeting={meeting} />}
      {roomState === 'joined' && <RtkText>Custom in-meeting UI</RtkText>}
      {roomState === 'ended' && <RtkText>Custom post-meeting UI</RtkText>}
    </View>
  );
}

If you want to build a custom pre-call UI, let's go to the next page to start building one.