1

Is there a way to set fontSize of a text to occupy all disponible space ?

e.g. I have a screen with multiple elements and I would like to have a text in the orange element and tell the text to occupy all the available space (in orange).

screen with 3 spaces with different flex propery

BenjaminB
  • 53
  • 6

2 Answers2

0

You can set font-size: 100%

BUT! This 100% based on the parent element font-size, not on the current element size.

So if you want your font fills full of the current element, you can make an approach:

<div style={{fontSize: `800px`}}>
  <div style={{height: `800px`, fontSize: `100%`}}>
    Some Text
  </div>
</div>

And you can make it more programmatically, based on your demand.

Refer: Related QA: CSS: 100% font size - 100% of what?

keikai
  • 14,085
  • 9
  • 49
  • 68
0

I don't know if it is the best answer, but i think you can do it using the React Native Dimensions API.

Check out the example that i created in snack.expo.io:

https://snack.expo.io/@luaneduardo/19a766

Hope it helps :)

Luan Eduardo
  • 406
  • 4
  • 4