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

Properties

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

Properties

OptionalcontrolUserMedia

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

Function to control user media settings (default: controlMedia)

State Parameters:

OptionalcustomStyle

customStyle?: StyleProp<ViewStyle>

Custom styles for the card container

name

name: string

Participant's display name

OptionalbarColor

barColor?: string

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

OptionaltextColor

textColor?: string

Color of text overlays (default: 'white')

Image/Avatar Properties:

OptionalimageSource

imageSource?: string

URI for participant's avatar image

OptionalroundedImage

roundedImage?: boolean

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

OptionalimageStyle

imageStyle?: StyleProp<ImageStyle>

Custom styles for the avatar image

Controls & Info Properties:

OptionalshowControls

showControls?: boolean

Whether to show media control buttons (default: true)

OptionalshowInfo

showInfo?: boolean

Whether to show participant info overlay (default: true)

OptionalvideoInfoComponent

videoInfoComponent?: ReactNode

Custom component for info overlay

OptionalvideoControlsComponent

videoControlsComponent?: ReactNode

Custom component for controls

OptionalcontrolsPosition

controlsPosition?: ControlsPosition

Position of controls overlay (default: 'topLeft')

OptionalinfoPosition

infoPosition?: InfoPosition

Position of info overlay (default: 'bottomLeft')

Media Control:

participant

participant: Participant

Complete participant object with metadata

OptionalbackgroundColor

backgroundColor?: string

Background color (default: '#2c678f')

OptionalaudioDecibels

audioDecibels?: AudioDecibels

Audio level data for this participant's waveform

Styling Properties:

parameters

parameters: AudioCardParameters

State and context parameters for the card

Custom UI Override:

OptionalcustomAudioCard

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:

Optionalstyle

style?: object

Additional style object for the container

OptionalrenderContent

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

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

OptionalrenderContainer

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