Interface ControlButtonsComponentOptions

Configuration options for the ControlButtonsComponent.

ControlButtonsComponentOptions

Button Configuration:

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?: object;
    renderContent?: ((options: {
        defaultContent: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
    renderContainer?: ((options: {
        defaultContainer: ReactNode;
        dimensions: {
            width: number;
            height: number;
        };
    }) => ReactNode);
}

Properties

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

Properties

buttons

buttons: Button[]

Array of button configurations

Layout:

OptionalbuttonColor

buttonColor?: string

Default color for button icons

OptionalbuttonBackgroundColor

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

Background colors with default and pressed states

Optionalalignment

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

Button alignment within container

Optionalvertical

vertical?: boolean

Whether to arrange buttons vertically (true) or horizontally (false)

Styling:

OptionalbuttonsContainerStyle

buttonsContainerStyle?: StyleProp<ViewStyle>

Custom styles for buttons container

OptionalalternateIconComponent

alternateIconComponent?: Element

Global alternate icon component

OptionaliconComponent

iconComponent?: Element

Global icon component

Advanced Render Overrides:

Optionalstyle

style?: object

Additional custom styles for outer container

Custom Icons:

OptionalrenderContent

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

Optional custom renderer for button content (receives defaultContent and dimensions)

OptionalrenderContainer

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

Optional custom renderer for outer container (receives defaultContainer and dimensions)

Settings

Member Visibility

On This Page

Properties