Function MiniCard

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

// 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}
    />
  );
}
Copy

// 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}
/>
Copy

// 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}
/>
Copy

// 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>
  );
};
Copy