Mendix native qrcode widget implementing react-native-qrcode-svg
Renders a QR code from a String attribute on a native page.
- Any string payload — url, invitation code, vCard, deep link
- Configurable size
- Optional logo in the centre of the code
- Appearance configurable through native styling
- Works offline, 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.
The widget draws with react-native-svg, which the Mendix native template already provides —
it is not shipped in the package. react-native-qrcode-svg is shipped inside the .mpk,
which is why the file is around 1.2 MB.
Download one of the releases or build from source as follows
git clone https://github.com/Entidad/mendix-react-native-qrcode.git
cd ./mendix-react-native-qrcode
npm install
npm run build
Deploy entidad.io.native.Qrcode.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 Data view or a List view row.
| Property | Type | Required | Description |
|---|---|---|---|
data |
String attribute | yes | The payload encoded into the code. |
size |
Integer | yes (default 200) |
Width and height of the code in density-independent pixels. |
logo |
Image | no | Image drawn in the centre of the code. |
Nothing renders while data is empty. The widget draws an empty container rather than a
placeholder or an error, so a blank space usually means the attribute has not been filled yet.
size falls back to styling. When the size property is empty or less than 1, the
widget uses qrcode.size from the style class instead, which defaults to 200. The property
wins whenever it holds a usable number.
The box around the code follows the code's size, so raising size cannot clip it.
Map any image to the logo property — a static image resource from your project, or a
dynamic one. Both work: Mendix hands a static image to the widget as a bundled asset and a
dynamic one as a url, and the underlying library accepts either.
Raise the error correction level when you use a logo. The default is "M", which
recovers 15% of the code. A logo covers modules in the middle, so those modules have to be
reconstructed from the error correction data. Set ecl:"H" in your style class for 30%
recovery:
qrcode:{
ecl:"H",
logoSize:40,
logoMargin:2,
logoBackgroundColor:"#FFFFFF",
logoBorderRadius:4,
},
Keep the logo small relative to the code — around 20% of size is a practical ceiling. Use
logoBackgroundColor to punch a clean plate behind a logo that has transparency, or
"transparent" when the logo already carries its own backdrop.
Always verify by scanning the code at the size you actually ship it, with a normal phone camera. A code with a logo can look perfect and still fail to decode.
The widget reads three style keys, and only one of them is an ordinary React Native style:
| Key | Applied to |
|---|---|
container |
the wrapping View — a normal React Native ViewStyle |
qrcodeStyle |
the code itself — a normal React Native ViewStyle |
qrcode |
not a style. Options passed to react-native-qrcode-svg as props. |
qrcode is where the code's own settings live — ecl, quietZone, size, the logo*
options and the gradient. They are library options rather than style rules, so React Native
style properties do not belong there.
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 customQrcode={
container:{
alignItems:"center"
},
qrcode:{
ecl:"M",
quietZone:0,
backgroundColor:"#FFFFFF",
enableLinearGradient:false,
logoSize:30,
logoMargin:2,
logoBorderRadius:0,
logoBackgroundColor:"transparent",
size:200
},
qrcodeStyle:{
},
};
Leave qrcodeStyle empty unless you need padding or a border around the code. Setting
width or height there overrides the automatic sizing, which is only useful when you
deliberately want the box to differ from the code. React Native sizes are plain numbers of
density-independent pixels, not CSS strings — width:218 applies where width:"218px" is
ignored. Percentages are the one exception and are written as strings, for example
width:"100%".
Codes render in a solid colour unless you switch the gradient on. Set
enableLinearGradient in the qrcode options:
qrcode:{
enableLinearGradient:true,
linearGradient:["rgb(255,0,0)","rgb(0,255,255)"],
gradientDirection:["0%","0%","100%","100%"],
},
gradientDirection is the start and end point of the gradient as x1,y1,x2,y2, given as
percentages of the code's box. The default runs diagonally from the top left to the bottom
right; ["0%","0%","100%","0%"] runs left to right, and ["0%","0%","0%","100%"] top to
bottom. They must be strings — plain numbers are not valid SVG coordinates here.
Scanners need contrast between the code and its background, so keep both gradient colours
dark against a light backgroundColor. A gradient that fades toward white will not scan.
./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