Styling background images & colors in Native Mobile

2
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
2 answers
1

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