MediaSFU React Native
    Preparing search index...

    Interface ControlButtonsComponentOptions

    Options for rendering ControlButtonsComponent.

    ControlButtonsComponentOptions

    Buttons & Behaviour:

    interface ControlButtonsComponentOptions {
        buttons: Button[];
        buttonColor?: string;
        buttonBackgroundColor?: { default?: string; pressed?: string };
        alignment?:
            | "center"
            | "flex-start"
            | "flex-end"
            | "space-between"
            | "space-around"
            | "space-evenly";
        vertical?: boolean;
        buttonsContainerStyle?: StyleProp<ViewStyle>;
        alternateIconComponent?: Element;
        iconComponent?: Element;
        style?: StyleProp<ViewStyle>;
        renderContent?: (
            options: {
                defaultContent: Element;
                dimensions: { width: number; height: number };
            },
        ) => Element;
        renderContainer?: (
            options: {
                defaultContainer: Element;
                dimensions: { width: number; height: number };
            },
        ) => Element;
    }
    Index

    Properties

    buttons buttonColor? buttonBackgroundColor? alignment? vertical? buttonsContainerStyle? alternateIconComponent? iconComponent? style? renderContent? renderContainer?

    Properties

    buttons: Button[]

    Collection of button descriptors rendered in order.

    buttonColor?: string

    Default color applied to button labels/icons when no per-button color is provided.

    buttonBackgroundColor?: { default?: string; pressed?: string }

    Shared background colors applied to buttons.

    alignment?:
        | "center"
        | "flex-start"
        | "flex-end"
        | "space-between"
        | "space-around"
        | "space-evenly"

    Distribution of buttons within the container.

    Advanced Render Overrides:

    vertical?: boolean

    Arranges icon+label vertically within each button when true.

    Appearance:

    buttonsContainerStyle?: StyleProp<ViewStyle>

    Additional styles for the internal buttons wrapper.

    alternateIconComponent?: Element

    Shared component rendered when buttons are active.

    iconComponent?: Element

    Shared component rendered when buttons are inactive.

    Layout:

    style?: StyleProp<ViewStyle>

    Extra styles for the outer container.

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

    Wrap or replace the default button rendering while receiving basic layout dimensions.

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

    Override the top-level container element to integrate with custom shells.

    Settings

    Member Visibility

    On This Page

    Properties