add ellipsis in JavaScript NativeApp

0
Hello everyone, I am working in native mendix, and I have a container with a long text, I want it to be truncated and add ellipses, I made a direct function on the text, and it worked, however on different devices it looks different, Is there any function to make it styled in JavaScript?   I did this function     It does it well, however on different mobile devices, they will look good and on others it is truncated in half  
asked
2 answers
2

I solved this with styling, see https://reactnative.dev/docs/text.html#numberoflines

 

export const singleLineTextEllipsis = {
  text: {
    numberOfLines: 1,
  },
};
export const dualLineTextEllipsis = {
  text: {
    numberOfLines: 2,
  },
};

 

answered
1

Hello Ivan

 

I guess you are almost there!

But the "magic number" = 30, as you could see, doesn't work in all scenarios.

I'd recommend you to calculate this number based on the device screen size and font size, or even better, create a way to return the text based on these factors.

 

There's a lib in React Native that gives you access to the device's pixel density and font scale

https://reactnative.dev/docs/pixelratio

also, see Dimensions:

https://reactnative.dev/docs/dimensions

const { height, width } = Dimensions.get("window");

 

This lib is used in the helper file adjustfont.js, located at:

image.png

and such function is used in the file custom-variables.js 

 

Maybe you could write a JS Action that calculates the available space and returns a String that fits this space (using the elipsis if needed).

Some trial and error may be required as well.

 

The definite solution would be expose the ellipsizeMode property in the Text Widget (but for that you would need the source code), or create your own Text widget:

https://reactnative.dev/docs/text#ellipsizemode

 

Hope this info could help giving you some insights.

answered