Interface DynamicBottomBarLayout

Visual description of the bar: which theme renders it, the colors and fonts shared by every theme, and the per-theme layout knobs.

interface DynamicBottomBarLayout {
    backgroundColor?: string;
    badgeBackground?: string;
    badgeTextColor?: string;
    fontFamily?: { android?: string; ios?: string };
    platformThemes?: { android?: string; ios?: string };
    selectedColor?: string;
    selectedFontFamily?: { android?: string; ios?: string };
    theme?: string;
    themeCustomizations?: {
        classic?: ClassicThemeCustomization;
        [theme: string]: undefined | object;
    };
    unselectedColor?: string;
}

Properties

backgroundColor? badgeBackground? badgeTextColor? fontFamily? platformThemes? selectedColor? selectedFontFamily? theme? themeCustomizations? unselectedColor?

Properties

OptionalbackgroundColor

backgroundColor?: string

Bar background color (hex string).

OptionalbadgeBackground

badgeBackground?: string

Global badge background color, applied to every badge (hex string). Defaults to red when never set here nor on the live bar.

OptionalbadgeTextColor

badgeTextColor?: string

Global badge text color, applied to every badge (hex string). Defaults to white when never set here nor on the live bar.

OptionalfontFamily

fontFamily?: { android?: string; ios?: string }

Tab-label font. The font must already ship with the app — it is never downloaded at runtime, so ask for it to be bundled before referencing it here.

The name is given per platform, since each one identifies the same font differently — use the pair supplied with the bundled font (e.g. "opensans_regular" for android, "OpenSans-Regular" for ios). A name that doesn't match a bundled font falls back to the system font.

OptionalplatformThemes

platformThemes?: { android?: string; ios?: string }

Per-platform theme override, for when Android and iOS should not look the same. Only list the platform that differs from theme; a platform absent here uses theme, and what is listed here wins over theme.

The theme that ends up applying is the one whose node is read out of themeCustomizations.

OptionalselectedColor

selectedColor?: string

Color of the selected tab's icon and label (hex string). When omitted, the selected tab falls back to the colors defined by the app's own theme.

OptionalselectedFontFamily

selectedFontFamily?: { android?: string; ios?: string }

Font for the selected tab's label — same bundled, per-platform shape as fontFamily. When omitted, the selected tab uses fontFamily.

Optionaltheme

theme?: string

Global theme selector, applied to both platforms. An absent or unknown value falls back to "classic".

OptionalthemeCustomizations

themeCustomizations?: {
    classic?: ClassicThemeCustomization;
    [theme: string]: undefined | object;
}

Layout knobs, one node per theme, keyed by theme name. The app reads only the node of the effective theme (after platformThemes); nodes for other themes are ignored, so several themes' settings can coexist here.

OptionalunselectedColor

unselectedColor?: string

Color of unselected tabs' icons and labels (hex string). When omitted, unselected tabs fall back to the colors defined by the app's own theme.

Settings

Member Visibility

On This Page

Properties