question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Are there any way get witdh of <Text>, or get any text width in React?

See original GitHub issue

I 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:closed
  • Created 5 years ago
  • Comments:9

github_iconTop GitHub Comments

4reactions
aprilmintacpinedacommented, Feb 11, 2021

give props onLayout={callback}, then on the callback, do console.log(event.nativeEvent.layout); it will have height: number, width: number, x: number, y:number

0reactions
msandcommented, Dec 9, 2018

You can use UIManager.measure or onLayout, closing.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found