DyteSetupScreen

Dyte 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.

<DyteMeeting 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 { DyteSetupScreen, DyteText } from '@dytesdk/react-native-ui-kit';
import { useDyteMeeting, useDyteSelector } from '@dytesdk/react-native-core';

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

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

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