Native Keyboard Avoiding

Moves page content clear of the on-screen keyboard

Features

Wraps a native page so its content makes room when the keyboard opens, instead of being covered by it.

Android resizes its own window when the keyboard appears, so content there already gets out of the way. iOS does not — the keyboard is drawn over the app, and anything anchored to the bottom of the screen stays underneath it. This widget closes that gap, so a chat composer or a form field at the foot of a page stays visible while the user types.

Mendix ships no equivalent: the only keyboard action in Native Mobile Resources is HideKeyboard, which dismisses the keyboard rather than moving content out from under it.

Requirements

Studio Pro 11.12 or higher. Built against Mendix Pluggable Widgets Tools 11.12 (React 19, React Native 0.84).

Version history

1.0.0 — initial release.

Usage

Download one of the releases or build from source as follows

git clone https://github.com/Entidad/mendix-react-native-keyboardavoiding.git
cd ./mendix-react-native-keyboardavoiding
npm install
npm run build

Deploy entidad.io.native.NativeKeyboardAvoiding.mpk to $PROJ/widgets, then run Synchronize App Directory in Studio Pro (F4, or Menu / App / Synchronize App Directory).

The widget needs no entity context. Place it directly on the page and move the page's content inside it:

Native Keyboard Avoiding
└── Content
    ├── List view      (the messages)
    └── Container      (the composer)

Put the whole page inside, not just the input. Wrapping only the composer lifts the input but leaves the list at its original height, so the newest rows stay hidden behind the keyboard. Wrapping everything lets the list shrink and the composer ride up above it.

Properties

Property	Type	Required	Description
content	Widgets	no	The page content that should move out of the keyboard's way.
offset	Integer	yes (default 0)	Height of anything above the widget that the keyboard does not cover, such as a navigation header.
behavior	Enumeration	yes (default Padding)	How the content makes room.
applyOnAndroid	Boolean	yes (default false)	Also adjust on Android.

Behaviour

Set offset to the height of your navigation header. The widget can only measure from its own top edge, so it has no way to know that a header sits above it. Leave the offset at zero under a header and the content lands too low, still partly covered. A standard native header is around 44 on iOS plus the status bar; measure yours rather than guessing.

If the page has no header, leave it at zero.

behavior picks how room is made:

Value	Effect
Padding	Padding is added below the content, so the content shrinks. Right for a page with a scrolling list above an anchored input.
Height	The container's height is reduced. Similar to padding but resizes rather than pads.
Position	The whole container is shifted upward. Suits a short page that should move as one piece, but the top can slide off screen.

Android is left alone by default. It resizes the window itself, so adjusting here as well moves the content twice — the input ends up floating well above the keyboard. Only turn applyOnAndroid on if your app's activity does not use adjustResize.

The widget fills the page. Its default style is flex:1, which is what gives it room to give back when the keyboard opens. A class that removes the flex will make the widget collapse to its content's height and nothing will move.

Styling

The widget reads one style key:

Key	Applied to
container	the wrapper itself, a ViewStyle

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 customKeyboardAvoiding={
        container:{
                flex:1,
                backgroundColor:"#FCFCFC",
        },
};

Keep flex:1 unless you have a specific reason not to.

Demo project

None at this time

Issues, suggestions and feature requests

GitHub

Development and contribution

1. Install NPM package dependencies by using: npm install. Node 20.19.4 or higher is required.
2. Run npm start to watch for code changes. On every change:
   • the widget will be bundled;
   • the bundle will be included in a dist folder in the root directory of the project;
   • the bundle will be included in the deployment and widgets folder of the Mendix test project.

Contributions welcome

References

• https://reactnative.dev/docs/keyboardavoidingview
• https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-property-types/