Basic structure

What are we building?

We are deconstructing the default setup screen.

At the end of this group of docs, we should have the following screen built using low level components.

Let's put a basic skeleton and the initial boilerplate code.

File: Meeting.tsx

import { useRealtimeKitMeeting } from '@cloudflare/realtimekit-react-native';
import { RtkSetupScreen } from '@cloudflare/realtimekit-react-native-ui';
import type RealtimeKitClient from '@cloudflare/realtimekit';
import { useEffect, useState } from 'react';
import { View } from 'react-native';
import { CustomStates, SetState } from './types';
import CustomMeetingPreview from './CustomMeetingPreview';

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

  return (
    <View style={{ height: '480px' }}>
      {/* Our custom pre-call UI */}
      {roomState === 'init' && <CustomMeetingPreview />}

      {/* Essential components to play audio, show notifications etc */}
      <RtkParticipantsAudio meeting={meeting} />
      <RtkNotifications meeting={meeting} />
      <RtkDialogManager meeting={meeting} />

      {/* 

      For the sake of simplicty, the next couple of pages 
        will only talk about CustomMeetingPreview 
      
      {roomState === 'joined' && <CustomInMeetingUI />}
      {roomState === 'ended' && <CustomPostMeetingUI />)}
      
      */}
    </View>
  );
}

File: CustomMeetingPreview.tsx

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

export default function CustomMeetingPreview() {
  const { meeting } = useRealtimeKitMeeting();
  return (
    <View>
      <View>
        <RtkText>Joining as {meeting.self.name}</RtkText>
      </View>
      <RtkButton
        size="lg"
        onClick={async () => {
          // Call join() to enter the meeting
          await meeting.join();
        }}
      >
        Join
      </RtkButton>
    </View>
  );
}