Auto Adjust Font size In React Native

Question

I Have Created A Beautiful Todo App But There's One Problem The Text wHERE IT SHOWS THE TASK The Problem is there https://i.stack.imgur.com/7ZtBn.png

Look The Difference Between Do Home Work & Do Math HomeWork I dONT nEED LIKE tHAT It Weird I tried numberOfLines={1} But it's Look Like This https://i.stack.imgur.com/du9x8.png So What I need Is Auto Adjust the font size when the text length get's bigger. Can Anyone Help?

my Code:-

<Text
            style={{
              fontWeight: 'bold',
              fontSize: 20,
              color: COLORS.primary,
              textDecorationLine: todo?.completed ? 'line-through' : 'none',
              textDecorationColor:'red',
              
            }}>
            {todo?.task}
          </Text>

Answer 1

You can add in these attributes into your Text Tag:

<Text 
        numberOfLines={1} 
        adjustsFontSizeToFit
        style={{
          fontWeight: 'bold',
          fontSize: 20,
          color: COLORS.primary,
          textDecorationLine: todo?.completed ? 'line-through' : 'none',
          textDecorationColor:'red',
          
        }}>
        {todo?.task}
      </Text>

this will auto-adjust your Text Size according to the size of the mobile screen.