Soil ID match tile percentage should avoid wrapping in more cases

[knipec]

Repro

On certain devices, on the "Soil ID" page, the match percentage on the SoilMatchTile will wrap instead of staying on one line, even if there is a reasonable amount of space to accommodate it. It will more likely happen with "100%", but depending on the phone's size settings it may happen with 2-digit numbers as well Decide what layout logic to use to satisfy:

• Percentage doesn't wrap (unless the screen is very narrow, or the font size is larger than we want to support)
• Columns still line up

Context

Discussion in https://github.com/techmatters/terraso-mobile-client/issues/1197 Potential solution: Instead of a fixed pixel width, use a percent width, or perhaps dp?

[paulschreiber]

Would adjustsFontSizeToFit work here?

[knipec]

Would adjustsFontSizeToFit work here?

It is another option, but I think it looks weird because it could make things that are a higher percent match be a smaller size: (for reference this is adding adjustsFontSizeToFit numberOfLines={1} to the Text props)

[paulschreiber]

I think that is a good solution! @CourtneyLee333 what do you say?

[CourtneyLee333]

Can I see what a single digit percent looks like?

[CourtneyLee333]

Also, it seems that we could just decrease the font size. We still have the issue of what happens on a small screen with the font size turned up. I'd rather address this particular instance in the context of larger responsive design strategy throughout the app. It's very unlikely, and maybe impossible, for a 100% match to be returned.

[paulschreiber]

Here is an example

[CourtneyLee333]

Noting that, though we had been told a 100% match would be impossible, it is actually quite common from what we've seen in the app so far.

[CourtneyLee333]

Perhaps something to think through - do we need to show percentage numbers? Do they help or just make things confusing. We could use a number ranking system instead.

[knipec]

Also seeing "100" with the "%" sign missing (on many lat/longs, including 37.4303, -122.12658) on Android emulator. I'm don't entirely understand why, but it seems to only happen when the fontSize is 30px. If I use adjustsFontSizeToFit numberOfLines={1}, it seems to only happen when the fontSize is 30px or 32px?? -->

[CourtneyLee333]

FYI I'm reconsidering whether we even want to reveal the percentage numbers, or go back to just showing the rank from 1 - 12. Stay tuned...

[paulschreiber]

We can revisit after Capri. Let's fix the text wrapping for now.

[knipec]

Ok, ended up decreasing font size and using adjustsFontSizeToFit. Closing, as Courtney took a look and approved it on https://github.com/techmatters/terraso-mobile-client/pull/1696