Mendix React Native widget to render links from plain text
Renders a plain String attribute as text, turning any URLs it contains into tappable links that open in the device browser. Useful for user-authored content — posts, comments, chat messages, notes — where links arrive mixed into ordinary prose.
- Recognises full URLs (
https://entidad.io) and barewww.hosts (www.entidad.io) - Text flows and wraps like ordinary text, with links inline
- Original spacing and line breaks are preserved
- 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.
Download one of the releases or build from source as follows
git clone https://github.com/Entidad/mendix-react-native-linkextractor.git
cd ./mendix-react-native-linkextractor
npm install
npm run build
Deploy entidad.io.NativeLinkExtractor.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 and point it at a String attribute.
| Property | Type | Required | Description |
|---|---|---|---|
value |
String attribute | no | The text to render. Any URLs within it become tappable links. |
The widget is read-only; it never writes back to the attribute.
A word is treated as a link when it either contains a scheme (://) or begins with www..
Everything else stays plain text, so version numbers and file names such as 1.2 or
Node.js are left alone.
Bare domains without a www. prefix — entidad.io on its own — are not linked. Matching
those reliably would need a list of valid domain suffixes, and guessing produces false
positives on ordinary prose.
Tapping a link opens it with Linking.openURL. A www. host has no scheme, so it is opened
over https while the text on screen stays exactly as it was written.
Punctuation that ends a sentence is not part of the link. In Visit www.entidad.io, then call, the link is www.entidad.io and the comma renders as ordinary text. The characters
peeled off are . , ; : ! ?. Closing brackets are deliberately left in place, since URLs
ending in one are common enough that stripping them would break more than it fixes.
Given a String attribute containing
Meeting Link: www.entidad.io
the widget renders
<Text>
<Text>Meeting</Text>
<Text> </Text>
<Text>Link:</Text>
<Text> </Text>
<Text onPress={() => Linking.openURL("https://www.entidad.io")}>www.entidad.io</Text>
</Text>
The fragments are nested inside a single parent Text rather than laid out as separate
elements, which is what lets the words flow and wrap normally with the links sitting inline.
The widget reads three style keys:
| Key | Applied to |
|---|---|
container |
the parent Text wrapping the whole value |
text |
each plain-text fragment |
link |
each link fragment |
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 customNativeLinkExtractor={
container:{
lineHeight:18,
},
text:{
color:"#000000",
fontSize:12,
},
link:{
color:"#0000FF",
fontSize:12,
},
};
container styles a Text, so layout properties such as flexDirection and flexWrap
have no effect there. Text properties do: lineHeight, textAlign and color set on
container cascade to the fragments inside it, which is the place to control line spacing
for the block as a whole.
Keep fontSize the same on text and link unless you specifically want links to stand
out by size — mixed sizes on one line make the baseline uneven.
./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