MediaSFU React Native (Expo)
    Preparing search index...

    Function prepopulateUserMedia

    • Function

      Populates the main screen grid with participant video/audio cards based on current streams and settings.

      This function is responsible for rendering the main user media grid, supporting both custom render functions and component overrides for comprehensive UI customization. It implements a two-tier override system:

      1. Custom render functions (customVideoCard, customAudioCard, customMiniCard) - Full rendering control
      2. Component overrides (videoCardComponent, audioCardComponent, miniCardComponent) - Component replacement

      The function intelligently determines which type of card to display (video, audio, or mini) based on participant media state and event configuration, then uses helper functions to properly invoke custom render functions or render component overrides.

      Parameters

      Returns Promise<void | Element[]>

      Array of React elements representing participant cards, or void.

      const customVideoCard = ({ participant, videoStream, showControls }) => (
          <View><Text>{participant.name}</Text></View>
        );

      const customAudioCard = ({ participant, showWaveform }) => (
          <View><Text>🎤 {participant.name}</Text></View>
        );

      const customMiniCard = ({ participant }) => (
          <View style={{ width: 50, height: 50 }}><Text>{participant.name[0]}</Text></View>
        );

      import { MyCustomVideoCard } from './components/MyCustomVideoCard';
        // Pass: videoCardComponent: MyCustomVideoCard

      Throws error if there's an issue processing streams or rendering components.

      // Basic usage without customization
      import { prepopulateUserMedia } from 'mediasfu-reactnative-expo';

      const components = await prepopulateUserMedia({
        name: 'mainGrid',
        parameters: {
          participants: allParticipants,
          allVideoStreams: videoStreams,
          eventType: 'conference',
          islevel: '2',
          member: 'John Doe',
          // ... other required parameters
        },
      });

      // Using custom render functions for full control
      import { prepopulateUserMedia } from 'mediasfu-reactnative-expo';

      const CustomVideo = ({ participant, videoStream }) => (
        <View style={{ borderWidth: 3, borderColor: 'gold' }}>
          <Text style={{ fontSize: 20 }}>{participant.name}</Text>
          {/* Custom video rendering */}
        </View>
      );

      const components = await prepopulateUserMedia({
        name: 'mainGrid',
        parameters: {
          participants: allParticipants,
          customVideoCard: CustomVideo,
          customAudioCard: CustomAudio,
          customMiniCard: CustomMini,
          eventType: 'conference',
          // ... other parameters
        },
      });

      // Using component overrides to replace defaults
      import { prepopulateUserMedia } from 'mediasfu-reactnative-expo';
      import { MyVideoCard, MyAudioCard, MyMiniCard } from './custom-components';

      const components = await prepopulateUserMedia({
        name: 'mainGrid',
        parameters: {
          participants: allParticipants,
          videoCardComponent: MyVideoCard,
          audioCardComponent: MyAudioCard,
          miniCardComponent: MyMiniCard,
          eventType: 'webinar',
          // ... other parameters
        },
      });

      remoteScreenStream: [],
          oldAllStreams: [],
          newLimitedStreams: [],
          sleep: sleepFunction,
          getUpdatedAllParams: () => parameters,
        },
      });

    Settings

    Member Visibility