Mendix React Native Verification Code Widget
A segmented code entry field for native pages — one cell per character, with the cell awaiting input highlighted. Typical uses are one-time passwords, SMS confirmation codes and PIN confirmation steps.
- Configurable code length
- Numeric or alphanumeric keyboard
- Separate events for partial input and for a completed code
- Writes straight back to a String attribute, so the value survives navigation
- 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.
Note that the widget id changed in 2.0.0 from endidad.… to entidad.…, correcting a
misspelling. Studio Pro treats this as a different widget, so a page using the old version
will not pick up the new one automatically — delete the old widget from the page and add
this one in its place.
Download one of the releases or build from source as follows
git clone https://github.com/Entidad/mendix-react-native-verification-code.git
cd ./mendix-react-native-verification-code
npm install
npm run build
Deploy entidad.io.native.NativeVerificationCode.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, then configure the properties below.
| Property | Type | Required | Description |
|---|---|---|---|
value |
String attribute | yes | Holds the code. The widget writes each keystroke back to it. |
length |
Integer attribute | yes | Number of cells to display. |
numericKeypad |
Boolean | yes (default false) |
Show a digits-only keyboard instead of a full one. |
onChangeAction |
Action | no | Fires while the code is still incomplete. |
onEndAction |
Action | no | Fires when the final character completes the code. |
The standard Editability property is supported.
The attribute is updated before either event runs. On every keystroke the widget calls
setValue on value and only then executes the action, so a microflow or nanoflow triggered
by these events always reads the current code rather than the previous one.
The two events are mutually exclusive. For a length of 5, typing five characters fires
onChangeAction four times and onEndAction once — onChangeAction does not fire on the
keystroke that completes the code. Put validation on onEndAction; use onChangeAction only
for partial-input feedback such as clearing a previous error.
Both events respect the usual action guards, so nothing runs when the action is unauthorised, cannot execute, or is already executing with disabled during execution set.
Nothing renders when length is 0 or less, which includes the case where the attribute is
still empty. Give it a default value, or set it before the page opens.
numericKeypad selects the keyboard per platform — number-pad / numeric when enabled on
iOS / Android respectively, ascii-capable / default when not.
The widget reads four style keys:
| Key | Applied to |
|---|---|
root |
the wrapping View |
codeFieldRoot |
the row holding the cells |
cell |
each individual cell |
focusCell |
merged over cell for the cell awaiting input |
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 customNativeVerificationCode={
root:{
padding:0,
margin:0,
},
codeFieldRoot:{
margin:0,
marginTop:0,
justifyContent:"center",
},
cell:{
flex:1,
height:40,
lineHeight:39,
padding:0,
margin:3,
fontSize:16,
borderWidth:1,
borderRadius:4,
borderColor:"#CCCCCC",
},
focusCell:{
borderColor:"#000",
},
};
Note that cell sets no width. Giving the cells flex:1 instead lets them divide the
row evenly, so the field adapts to the code length and the screen width rather than being
pinned to a fixed size. Setting both would not work — flex takes precedence over width
on the row's main axis, and the cells would stretch regardless of the width you gave them.
The widget reserves a transparent 2px border on cell by default so focusCell can colour
it in without the focused cell changing size. If you set your own borderWidth, as above,
keep it the same on both keys so the row does not shift as focus moves.
./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