Native Image Viewer
Display an image in a native page from either of two sources:
- a Mendix image — a static image resource selected in Studio Pro, or a dynamic
System.Imagespecialization retrieved from the database - a URL held in a String attribute
Works offline and is available on both iOS and Android.
Studio Pro 11.12 or higher.
Version 2.0.0 is built against Mendix Pluggable Widgets Tools 11.12 (React 19, React Native 0.84) and is not backward compatible. Stay on the 1.x release for Studio Pro 10.
Download one of the releases or build from source as follows
git clone https://github.com/Entidad/mendix-react-native-imageviewer.git
cd ./mendix-react-native-imageviewer
npm install
npm run build
Deploy entidad.io.NativeImage.mpk to $PROJ/widgets, then run Synchronize App Directory in Studio Pro (F4, or Menu / App / Synchronize App Directory).
The widget needs an entity context, so place it inside a context-providing container such as a Data view or a List view row, then configure one of the two properties below.
image(optional): A Mendix image. Point this at a static image resource, or at an association to aSystem.Imagespecialization such as your ownMyModule.Photo.url(optional): A String attribute containing an absolute URL, for examplehttps://example.com/logo.png.
Both properties are optional, and the widget resolves them in order:
- If
imageis available, it is used. - Otherwise, if
urlis available, it is used. - If neither is available, the widget renders nothing.
This means you can bind both and let image win when an object has one, falling back to a URL when it does not.
If you set a width and height in styling, every source honours them and renders identically. See Sample Styling below.
Without an explicit size, the sources differ, because a static image's dimensions are known up front while a remote one's are not:
- A static image is drawn at its own pixel dimensions, capped at the width of its container. A 96×96 image renders at 96×96; a 1024×1024 image is capped rather than overflowing.
- A dynamic
System.Imageand a URL fill the container width in a square box, scaled to fit without cropping. Their real dimensions are not known until the image loads, so the widget cannot size to them.
The container key styles the wrapping View and accepts any React Native ViewStyle. The image key styles the Image and accepts any ImageStyle. These are the only two keys the widget reads; anything else is ignored.
Any value you set here overrides the widget defaults — including for static images, where an explicit width, height, or maxWidth takes precedence over the image's own dimensions.
A note on flex and aspectRatio: these are the widget's fallback for sizing an image whose dimensions it cannot know yet, and flex outranks width on the container's main axis. So the widget drops flex as soon as you set a width or a height, and drops aspectRatio as well once you set both. Setting a size is enough — you do not have to unset them yourself.
Class names may contain only letters and numbers — following Mendix convention, a custom class is lowerCamelCase.
Export the class from theme/native/main.js, then enter its name in the widget's
Class property in Studio Pro:
export const customNativeImage={
container:{
flexDirection:"row",
},
image:{
resizeMode:"contain",
width:120,
height:120,
},
};
./test
- Install NPM package dependencies by using:
npm install. Node 20.19.4 or higher is required. - Run
npm startto watch for code changes. On every change:- the widget will be bundled;
- the bundle will be included in a
distfolder in the root directory of the project; - the bundle will be included in the
deploymentandwidgetsfolder of the Mendix test project.
Contributions welcome