Render participant videos

To display the videos of all participants you need to show on the screen, you can either render each participant tile manually or choose from our pre built video tile grid components

Render each participant manually

function Meeting() {
  const { meeting } = useRealtimeKitMeeting();
  const activeParticipants = useRealtimeKitSelector(
    (meeting) => meeting.participants.active,
  );

  function ParticipantTile({ participant, meeting }) {
    return (
      <RtkParticipantTile
        participant={participant}
        style={{
          width: 240,
          height: 480,
        }}
      >
        <RtkNameTag participant={participant} meeting={meeting}>
          <RtkAudioVisualizer participant={participant} />
        </RtkNameTag>
        <RtkAvatar size="sm" participant={participant} />
      </RtkParticipantTile>
    );
  }

  return (
    <View
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        alignContent: 'center',
        justifyContent: 'center',
        gap: '1rem',
      }}
    >
      {activeParticipants.toArray().map((participant) => (
        <ParticipantTile participant={participant} meeting={meeting} />
      ))}
    </View>
  );
}

But in the real world, a video tile grid is more complex, it is responsive, tile sizes are dynamic, there are different layouts, the grid handles screensharing etc.

RealtimeKit has ready to use grid components, that you can use out of the box

Grid Components

There are two types of grid components, so that the grid can be easily extended and modularized.

• Parent Grid component - RtkGrid
• Child Grid components each having a different layour - RtkSimpleGrid, RtkMixedGrid, RtkSpotlightGrid

Parent Grid Component

The RtkGrid component is a monolith component which handles all grid related events and data on it's own and passes the following props to it's children.

Prop	Description
participants[]	Active Participants
pinnedParticipants[]	Pinned Participants
screenShareParticipants[]	Participants who are screen sharing
plugins[]	Active Plugins

These props are passed to it's children which it computes from the UI Config which is passed to it. By default it will use the default UI Config.

tip

Try editing the aspectRatio and gap props.

function Example() {
  const { meeting } = useRealtimeKitMeeting();

  return (
    <View style={{ width: '100%', height: '400px' }}>
      <RtkGrid meeting={meeting} aspectRatio="16:9" gap="8" size="sm" />
    </View>
  );
}

Normal Grid Components

These components just accept the props mentioned above and render the UI.

Read more about them in their Reference pages.

RtkSimpleGrid

Accepts: participants, pinnedParticipants.

This grid renders just the ParticipantTiles of the participants you pass to it. It also brings pinnedParticipants to the start of the grid.

RtkSimpleGrid

Accepts: participants, pinnedParticipants.

This grid renders the ParticipantTiles of the participants and pinnedParticipants in separate grids.

Pinned participants are in spotlight area, i.e; larger grid.

RtkMixedGrid

Accepts: participants, pinnedParticipants, screenShareParticipants, plugins.

This grid renders screenshares as well as plugins in the main larger view and renders a smaller grid on the right side which is configurable via the UI Config. You can use SimleGrid or SpotlightGrid here.

If you just want to render self twice in a SimpleGrid:

Example for SimpleGrid

function Example() {
  const { meeting } = useRealtimeKitMeeting();
  const [count, setCount] = useState(2);

  if (!meeting) return null;

  const add = () => setCount((count) => count + 1);
  const remove = () => count > 1 && setCount((count) => count - 1);

  const participants = new Array(count).fill(meeting.self);

  return (
    <View>
      <View
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          justifyContent: 'center',
          gap: '12px',
        }}
      >
        <RtkButton onClick={add}>Add</RtkButton>
        <RtkButton variant="danger" onClick={remove}>
          Remove
        </RtkButton>
      </View>
      <View style={{ width: '100%', height: '400px' }}>
        <RtkSimpleGrid
          aspectRatio="16:9"
          gap="8"
          participants={participants}
        />
      </View>
    </View>
  );
}