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

    Interface AudioCardOptions

    Interface defining the options for the AudioCard component.

    AudioCard displays a participant in audio-only mode with waveform visualization, participant info, and optional media controls.

    AudioCardOptions

    Core Display Properties:

    interface AudioCardOptions {
        controlUserMedia?: (options: ControlMediaOptions) => Promise<void>;
        customStyle?: StyleProp<ViewStyle>;
        name: string;
        barColor?: string;
        textColor?: string;
        imageSource?: string;
        roundedImage?: boolean;
        imageStyle?: StyleProp<ImageStyle>;
        showControls?: boolean;
        showInfo?: boolean;
        videoInfoComponent?: ReactNode;
        videoControlsComponent?: ReactNode;
        controlsPosition?: ControlsPosition;
        infoPosition?: InfoPosition;
        participant: Participant;
        backgroundColor?: string;
        audioDecibels?: AudioDecibels;
        liveSubtitleText?: string;
        showSubtitles?: boolean;
        parameters: AudioCardParameters;
        customAudioCard?: CustomAudioCardType;
        style?: object;
        renderContent?: (
            options: {
                defaultContent: ReactNode;
                dimensions: { width: number; height: number };
            },
        ) => ReactNode;
        renderContainer?: (
            options: {
                defaultContainer: ReactNode;
                dimensions: { width: number; height: number };
            },
        ) => ReactNode;
    }
    Index

    Properties

    controlUserMedia? customStyle? name barColor? textColor? imageSource? roundedImage? imageStyle? showControls? showInfo? videoInfoComponent? videoControlsComponent? controlsPosition? infoPosition? participant backgroundColor? audioDecibels? liveSubtitleText? showSubtitles? parameters customAudioCard? style? renderContent? renderContainer?

    Properties

    controlUserMedia?: (options: ControlMediaOptions) => Promise<void>

    Function to control user media settings (default: controlMedia)

    State Parameters:

    customStyle?: StyleProp<ViewStyle>

    Custom styles for the card container

    name: string

    Participant's display name

    barColor?: string

    Color of the audio waveform bars (default: 'red')

    textColor?: string

    Color of text overlays (default: 'white')

    Image/Avatar Properties:

    imageSource?: string

    URI for participant's avatar image

    roundedImage?: boolean

    Whether to display avatar with rounded corners (default: false)

    imageStyle?: StyleProp<ImageStyle>

    Custom styles for the avatar image

    Controls & Info Properties:

    showControls?: boolean

    Whether to show media control buttons (default: true)

    showInfo?: boolean

    Whether to show participant info overlay (default: true)

    videoInfoComponent?: ReactNode

    Custom component for info overlay

    videoControlsComponent?: ReactNode

    Custom component for controls

    controlsPosition?: ControlsPosition

    Position of controls overlay (default: 'topLeft')

    infoPosition?: InfoPosition

    Position of info overlay (default: 'bottomLeft')

    Media Control:

    participant: Participant

    Complete participant object with metadata

    backgroundColor?: string

    Background color (default: '#2c678f')

    audioDecibels?: AudioDecibels

    Audio level data for this participant's waveform

    Styling Properties:

    liveSubtitleText?: string
    showSubtitles?: boolean
    parameters: AudioCardParameters

    State and context parameters for the card

    Custom UI Override:

    customAudioCard?: CustomAudioCardType

    Custom render function for complete card replacement. When provided, this function receives all AudioCardOptions and returns custom JSX.Element. This allows full control over the audio card's appearance and behavior.

    Advanced Render Overrides:

    style?: object

    Additional style object for the container

    renderContent?: (
        options: {
            defaultContent: ReactNode;
            dimensions: { width: number; height: number };
        },
    ) => ReactNode

    Function to wrap or replace the default card content while preserving container

    renderContainer?: (
        options: {
            defaultContainer: ReactNode;
            dimensions: { width: number; height: number };
        },
    ) => ReactNode

    Function to wrap or replace the entire card container

    Settings

    Member Visibility

    On This Page

    Properties