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

    Variable MiniCardConst

    MiniCard: React.FC<MiniCardOptions> = ...

    MiniCard - Compact participant card displaying avatar or initials with status icons

    MiniCard is a lightweight React Native component designed for displaying participants in compact grid layouts, sidebars, or minimized views. It intelligently renders either a participant's avatar image or their initials, with optional status icons for audio/video.

    Key Features:

    • Avatar image display with automatic fallback to initials
    • Optional audio/video status icon overlays
    • Rounded or square image corners
    • Compact design optimized for grid layouts
    • Fully customizable styling
    • Lightweight performance footprint

    UI Customization - Two-Tier Override System:

    1. Custom Render Function (via customMiniCard prop): Pass a function that receives all MiniCardOptions and returns custom JSX. Provides complete control over rendering logic and appearance.

    2. Component Override (via uiOverrides.miniCardComponent): Replace the entire MiniCard component while preserving MediaSFU's orchestration. Useful when you want a different component implementation.

    Advanced Render Overrides:

    • renderContent: Wrap/modify the card's inner content while keeping container
    • renderContainer: Wrap/modify the entire card container

    Configuration options for the MiniCard component

    Rendered mini card with avatar/initials and optional status icons

    // Basic usage - Display with initials
    import React from 'react';
    import { MiniCard } from 'mediasfu-reactnative-expo';

    function ParticipantGrid() {
      return (
        <MiniCard
          initials="AB"
          name="Alice Brown"
          fontSize={14}
          roundedImage={true}
          showVideoIcon={false}
          showAudioIcon={true}
        />
      );
    }

    // With avatar image and custom styling
    <MiniCard
      name="Charlie Davis"
      imageSource="https://example.com/avatars/charlie.jpg"
      roundedImage={true}
      showVideoIcon={true}
      showAudioIcon={false}
      customStyle={{
        backgroundColor: '#1a1a2e',
        borderRadius: 10,
        borderWidth: 2,
        borderColor: '#16213e',
        padding: 5,
      }}
      imageStyle={{ width: 50, height: 50 }}
      fontSize={16}
    />

    // Custom mini card with custom render function
    import { View, Text } from 'react-native';

    const customMiniCard = (options: MiniCardOptions) => {
      const { name, initials, showVideoIcon, showAudioIcon } = options;
      
      return (
        <View style={{ backgroundColor: '#000', padding: 8, borderRadius: 8 }}>
          <Text style={{ color: '#fff', fontSize: 12, fontWeight: 'bold' }}>
            {initials || name?.substring(0, 2).toUpperCase()}
          </Text>
          <View style={{ flexDirection: 'row', marginTop: 4 }}>
            {showVideoIcon && <Text style={{ marginRight: 4 }}>📹</Text>}
            {showAudioIcon && <Text>🔊</Text>}
          </View>
        </View>
      );
    };

    <MiniCard
      name="Eve Foster"
      initials="EF"
      showVideoIcon={true}
      showAudioIcon={false}
      customMiniCard={customMiniCard}
    />

    // Using uiOverrides for component-level customization
    import { MyCustomMiniCard } from './MyCustomMiniCard';

    const sessionConfig = {
      credentials: { apiKey: 'your-api-key' },
      uiOverrides: {
        miniCardComponent: {
          component: MyCustomMiniCard,
          injectedProps: {
            theme: 'minimal',
            size: 'small',
          },
        },
      },
    };

    // MyCustomMiniCard.tsx
    export const MyCustomMiniCard = (props: MiniCardOptions & { theme: string; size: string }) => {
      const cardSize = props.size === 'small' ? 40 : 60;
      
      return (
        <View style={{ width: cardSize, height: cardSize, borderRadius: cardSize / 2 }}>
          {props.imageSource ? (
            <Image source={{ uri: props.imageSource }} style={{ width: cardSize, height: cardSize }} />
          ) : (
            <Text style={{ fontSize: props.fontSize }}>{props.initials}</Text>
          )}
        </View>
      );
    };

    Settings

    Member Visibility