Edit user name

A common use case of pre-call UI is to give the user a option to set / edit their name.

Permissions

Requires meeting.self.permissions.canEditDisplayName to be true

In the preset editor, ensure Miscellaneous > Edit Name is toggled enabled.

File: CustomMeetingPreview.tsx

We add a RtkInputField element for entering the participant name. We should not show this input if the user doese not have permission to edit name (permissions.canEditDisplayName)

await meeting.self.setName(participantName); sets the new name for the participant.

At the end, we let user join the meeting using await meeting.join();.

import { useRealtimeKitMeeting, useRealtimeKitSelector } from '@cloudflare/realtimekit-react-native';
import { RtkButton, RtkTextField } from '@cloudflare/realtimekit-react-native-ui';
import { useState, useEffect } from 'react';
import { View } from 'react-native';

export default function CustomMeetingPreview() {
  const { meeting } = useRealtimeKitMeeting();
  const permissions = useRealtimeKitSelector((m) => m.self.permissions);
  const [participantName, setParticipantName] = useState('');

  useEffect(() => {
    if (!meeting) {
      return;
    }
    setParticipantName(meeting.self.name);
  }, [meeting]);

  return (
    <View
      className="flex h-full w-full flex-col items-center justify-center"
      style={{ minHeight: '400px' }}
    >
      <View className="flex w-full items-center justify-around p-[10%]">
        <View className="flex w-1/4 flex-col justify-between">
          <View className="flex flex-col items-center">
            <p>Joining as</p>
          </View>
          {permissions.canEditDisplayName && (
            <RtkTextField
              placeholder="Your name"
              value={participantName}
              onChange={(event) => setParticipantName(event.target.value)}
            />
          )}
          <RtkButton
            kind="wide"
            size="lg"
            onClick={async () => {
              if (participantName) {
                if (permissions.canEditDisplayName) {
                  await meeting.self.setName(participantName);
                }
                await meeting.join();
              }
            }}
          >
            Join
          </RtkButton>
        </View>
      </View>
    </View>
  );
}