Native Mobile - Style Header

1
Hi, I'm trying to find out how styling for Native Mobile apps work, this guide is helping a lot, but I can't seem to figure out how to style the Header of a Native Page. I cannot find this element/widget in the documentation. I'm talking about the header you can enable in the layout properties What ClassName should I use to style the header? Thanks!
asked
4 answers
2

Here you can find more info: https://docs.mendix.com/refguide/native-styling-refguide#navigation-widget

answered
4

You can also look inside Atlas files and check how we at Mendix are styling header and all the other widgets.

Please navigate to theme/native and check the files inside core folder.

answered
3

The best way to customize the topbar is to go to the file `theme/styles/native/app/custom-variables.js` and replace the following code:

// Navigation Styles
export const navigation = {
    topBar: {
        backgroundColor: background.primary,
        backButtonColor: contrast.highest,
        titleColor: contrast.highest,
    },
    bottomBar: {
        color: contrast.high,
        selectedColor: brand.primary,
        backgroundColor: background.primary,
    },
};

with

// Navigation Styles
export const navigation = {
    statusBar: {
        backgroundColor: background.primary,
        barStyle: darkMode ? "light-content" : "dark-content",
    },
    topBar: {
        backgroundColor: background.primary,
        backButtonColor: contrast.highest,
        titleColor: contrast.highest,
        titleFontSize: font.sizeH5,
    },
    bottomBar: {
        color: contrast.high,
        selectedTextColor: contrast.high,
        selectedIconColor: brand.primary,
        backgroundColor: background.primary,
        fontSize: font.sizeSmall,
        iconSize: font.sizeSmall,
    },
    progressOverlay: {
        color: "#FFF",
        activityIndicatorColor: "#FFF",
        backgroundColor: `rgba(0, 0, 0, 0.5)`,
        fontSize: font.size,
    },
};


And change the values as desired :)  (The updated custom variables will be in the next Atlas release)

 

Alternatively you can also copy the complete default styling from `theme/styles/native/core/widgets/navigation.js` to `theme/styles/native/app/custom.js` and change/update it there.

answered
1

great, I did not realise the header was part of the navigation widget. Thanks guys!

answered