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

    Variable AudioGridConst

    AudioGrid: React.FC<AudioGridOptions> = ...

    AudioGrid - Flexible layout container for audio-only participant displays

    AudioGrid is a React Native component that organizes multiple audio participant cards into a vertical stacked layout. It's typically used to display participants who are not sharing video, showing their avatar, name, and audio waveform.

    Key Features:

    • Vertical stacking of audio participant cards
    • Flexible z-index management for overlays
    • Custom styling support
    • Advanced render override hooks
    • Efficient rendering of large participant lists

    UI Customization: This component can be replaced via uiOverrides.audioGridComponent to provide a completely custom audio participant grid layout.

    Configuration options for the AudioGrid component

    Rendered audio grid with participant cards

    // Basic usage - Display audio-only participants
    import React from 'react';
    import { AudioGrid, AudioCard } from 'mediasfu-reactnative-expo';

    function AudioParticipantsList() {
      const audioParticipants = [
        { name: 'Alice', audioProducerId: 'audio1', muted: false },
        { name: 'Bob', audioProducerId: 'audio2', muted: true },
        { name: 'Charlie', audioProducerId: 'audio3', muted: false },
      ];

      const audioCards = audioParticipants.map((participant, index) => (
        <AudioCard
          key={participant.audioProducerId}
          name={participant.name}
          barColor="red"
          textColor="white"
          imageSource={participant.avatar}
          roundedImage={true}
          imageStyle={{ width: 50, height: 50 }}
        />
      ));

      return <AudioGrid componentsToRender={audioCards} />;
    }

    // With custom styling
    <AudioGrid
      componentsToRender={audioCards}
      style={{
        backgroundColor: '#f0f0f0',
        padding: 10,
        borderRadius: 8,
      }}
    />

    // With custom content renderer (add separator lines)
    <AudioGrid
      componentsToRender={audioCards}
      renderContent={({ defaultContent }) => (
        <>
          {React.Children.map(defaultContent, (child, index) => (
            <React.Fragment key={index}>
              {child}
              {index < audioCards.length - 1 && (
                <View style={{ height: 1, backgroundColor: '#e0e0e0' }} />
              )}
            </React.Fragment>
          ))}
        </>
      )}
    />

    // Using uiOverrides for complete grid replacement
    import { MyCustomAudioGrid } from './MyCustomAudioGrid';

    const sessionConfig = {
      credentials: { apiKey: 'your-api-key' },
      uiOverrides: {
        audioGridComponent: {
          component: MyCustomAudioGrid,
          injectedProps: {
            gridLayout: 'masonry',
            itemSpacing: 12,
          },
        },
      },
    };

    // MyCustomAudioGrid.tsx
    export const MyCustomAudioGrid = (props: AudioGridOptions & { gridLayout: string; itemSpacing: number }) => {
      return (
        <View style={{ flexDirection: 'column', gap: props.itemSpacing }}>
          {props.componentsToRender.map((component, index) => (
            <View key={index} style={{ padding: props.itemSpacing }}>
              {component}
            </View>
          ))}
        </View>
      );
    };

    Settings

    Member Visibility