Styling background images & colors in Native Mobile

3
Hello all, I need help figuring out how to style background images and color gradients in native mobile. I don’t have prior experience with React/JS in general, and the solutions I tried before (ImageBackground from the FB GitHub, and Expo lineair gradient) didn’t seem to comply with the Mendix component files. Does anyone has tips on how to style a native mobile page background with image and/or color gradient?  Cheers, Gina Visser   Solutions I tried but couldn’t/failed to implement: - https://facebook.github.io/react-native/docs/imagebackground - https://medium.com/@chsvk/react-native-gradient-backgrounds-b9f1f14bfe7b 
asked
5 answers
4

To use an image as a background, you should use an mendix image widget. You can do it in 2 ways:

  • Add custom styles to the image widget where you use `position: absolute` to position the image behind the other content.
    Example: 
    export const customImage = {
    container: {
        position: 'absolute',
    },
};

     
  • Place all content on the page (except for the image) inside a container, and add `position: absolute` to that container to position it in front of the image.
    Example: 
    export const customContainer = {
    container: {
        position: 'absolute',
    },
};

     

Resources:

 

 

answered
1

Hi Gina,

Did you look into these below how-to links?

https://docs.mendix.com/refguide/native-styling-refguide

https://docs.mendix.com/howto/mobile/how-to-use-native-styling

https://docs.mendix.com/howto/mobile/native-styling

 

 

Hope this helps!

answered
0

I had to resort to modifying the custom-variables.js to have a black background
for my NATIVE app so it would look like dark mode for a pleasing UX 
and to conserve users battery usage.
Spent weeks trying to weed through NATIVE PAGE/CONTAINER properties, etc
and way too much content documentation and Forum posts about "STYLING", etc
(which appears not to be related to NATIVE PAGES)
and attempting to have the Web Studio perform the needed functionality.
It should not have been this difficult and I should 
NOT have to hard code the desired background color.  custom-variables.js mods:

...

//
// Background Colors
// const backgroundColor = darkMode ? "#000" : "#FFF";
// const backgroundSecondaryContrast = darkMode ? 0.11 : 0.03;
const backgroundColor = "#000";
const backgroundSecondaryContrast = 0.11;
//

...

answered
0

Hi RoseWater,

 

I am also struggling with changing background color in Mendix native mobile app. I am really thankful that you shared the code in the forum. However, may I also ask something please?

 

I am using “NativePhone_TopBarOnly ( Atlas_UI_Resources) for my native mobile app layouts, and I have a bottom bar navigation in my native mobile app. May I ask if theres a way to change background color for the top bar as well as the bottom bar please? So basically may I know if there is a way to have 3 different colors ( for eg, top bar is green color, middle ( contents of the app) is blue, navigation ( bottom bar) is white. 

 

I have been searching but most of the resources talk about are the web version, like you mentioned. Even if there’s resources about changing color it mainly talks about changing button color. As a person who is using Mendix as his first programming project, it is very confusing and hard for me. I sincerely apologize for the inconvenience caused. 

answered
0

Hiya,

We hosted a Low-Code Live Build on this last year, “Design Native Apps like a Pro”. You can watch the full recording on YouTube 

 

https://www.youtube.com/watch?v=XisOrOvJLlo&t=2s 

 

answered