Are there any way get witdh of <Text>, or get any text width in React?
See original GitHub issueI want to draw background by Text so i must have width of text. Are there any way get witdh of <Text> in react-native-svg ?
Other hand, I tried calculate text width using below javascript code convert to React-Native, but React.createElement() didn’t work.
function getTextWidth(text, font) {
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(text);
return metrics.width;
}
Issue Analytics
- State:
- Created 5 years ago
- Comments:9
Top Results From Across the Web
Calculate pixel width of text without knowing font in React ...
Some solutions I have found online provide methods that factor in the font, but the font could change, so I need a method...
Read more >Are there any way get witdh of <Text>, or get any text width in ...
I tried calculate text width using below javascript code convert to React-Native, but React.createElement() didn't work. function getTextWidth( ...
Read more >Measuring Text on React with Hooks - DEV Community 👩💻👨💻
When returned, will be set on span that contains the react measure function example. I just add two things: New hooks called setWidth...
Read more >React Hook to Measure Text Width - Morioh
use-text-width React hook to calculate text width. ... However, you are probably also wondering how close you can get to a native app...
Read more >get-text-width - npm
This module helps calculate the rendered width of text.. Latest version: 1.0.3, last published: a year ago. Start using get-text-width in ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
give props
onLayout={callback}
, then on the callback, doconsole.log(event.nativeEvent.layout);
it will haveheight: number, width: number, x: number, y:number
You can use UIManager.measure or onLayout, closing.