React Native Style Navigation Bar

0
Dear All, I am currently trying to figure out how to style the nav bar for a reactnative app. I have no idea what to do. I have managed to style several different items, and the documentation indicates that I should use “navigationStyle” but nothing is happening. I have tried adding a class to the navigation. I have tried setting up an overwrite class. Do any of you have any tips? Thanks beforehand! Best regards,   Wouter
asked
4 answers
4

Hi Wouter,

To change the statusbar / topbar / bottombar, you should indeed use the class `navigationStyle`. The default styles for this class can be found in `theme/styles/native/core/widgets/navigation.js`. You can copy over this class to `theme/styles/native/app/custom.js` and update (overwrite) it there. Never change any files in the core folder, as this will make updating Atlas much harder. Also, the file `custom-variables.js` should only be used for variables, don’t use this file for class definitions, as that will probably cause problems.

Also, keep in mind that not all starter templates have the latest atlas version. To be sure you have the latest atlas version, use the native mobile quickstart app. When you do, you should see a class like this:

export const navigationStyle = {
    statusBar: {},
    topBar: {
        container: {},
        title: {},
        backButtonText: {},
        backButtonIcon: {},
    },
    bottomBar: {
        container: {},
        label: {},
        selectedLabel: {},
        icon: {},
        selectedIcon: {},
    },
    progressOverlay: {
        background: {},
        container: {},
        activityIndicator: {},
        text: {},
    },
};

Hope this helps!

answered
0

I believe you should be finding the class/const called navigationStyle in your native theming, then updating according to your needs based on the documentation here:

https://docs.mendix.com/refguide/native-styling-refguide#navigation-widget

If that isn’t working for you, please share the definition of your navigationStyle const here and we’ll troubleshoot together.

answered
0

Dear Eric, 

Thanks for your reply. It is very strange – it seems that the class navigationStyle is not found in some way in the one project. When I created another one based on the example nativeReact project that is available for Mendix, it did find the class. Could it be that the class topBar / bottomBar has not been assigned properly to the atlasUI layouts I have? If so, is there a way to change this, or set different classes to it? I have tried doing so, but so far there was no result.

Best regards,

 

Wouter Penris

answered
0

navigationStyle in custom-variables.js: (the puple/white constants have been defined above in the same file). If I implement this in the example project by Mendix, everything seems to work.
 

export const navigationStyle = {
    topBar: {
        backgroundColor: purple.p1,
        backButtonColor: white.p1,
        titleColor: white.p1,
        titleFontSize: font.sizeH4,
        fontWeight: Platform.select({ ios: font.weightBold, android: font.weightNormal }),
    },
    bottomBar: {
        fontSize: font.sizeSmall,
        backgroundColor: purple.p1,
        color: white.p1,
        selectedColor: purple.p2,
    },
};

 

answered