fix: some text cut off on certain devices

[andersmmg]

Tip

Help us review and merge your PR faster!
Please ensure you have completed the Checklist below.
For Frontend changes, please run pnpm run validate to check for any errors.
PRs that include tests and clear screenshots are highly preferred!
Note: AI-generated descriptions must be manually edited for conciseness. Do not paste raw AI summaries.

Description

What problem does this PR solve?
Some devices (especially Samsung and OnePlus) will have text cut off in some places. This is a known React Native issue and has been for a while.

How did you implement the solution?
The simplest fix suggested is to add an empty space after the text. It's weird, but it works. Open to other ideas, there are a lot of suggested fixes for this issue.
react/react-native/issues/15114
react/react-native/issues/53666

Linked Issue: Closes #1905

How to Test

1. Check out this branch and check the about page
2. Verify that the text is not cut off

(Only on some devices)

PR Type

• Issue (bug fix)
• New Feature
• Refactor
• Documentation

Checklist

All PRs:

• [MANDATORY - ALL] Integrity & License: I certify this is my own work, free of malicious code, and I agree to the License terms.

New features only:

• [MANDATORY for new feature] Alignment: I have raised a GitHub issue and it was reviewed/approved by maintainers or it was approved on Discord.

Frontend changes (SparkyFitnessFrontend/):

• [MANDATORY for Frontend changes] Quality: I have run pnpm run validate and it passes.
• [MANDATORY for Frontend changes] Translations: I have only updated the English (en) translation file.

Backend changes (SparkyFitnessServer/):

• [MANDATORY for Backend changes] Code Quality: I have run typecheck, lint, and tests. New files use TypeScript, new endpoints have Zod schemas, and new endpoints include tests.
• [MANDATORY for Backend changes] Database Security: I have updated rls_policies.sql for any new user-specific tables.

UI changes (components, screens, pages):

• [MANDATORY for UI changes] Screenshots: I have attached Before/After screenshots below.

Mobile changes (SparkyFitnessMobile/):

• [MANDATORY for Mobile changes] Tested on device or emulator: I have verified the changes work on iOS or Android.

Screenshots

Click to expand

Before

After

Notes for Reviewers

I'm still looking into other methods of solving this. Many involve much more invasive or questionable changes, this is what I've gone with for now. There are also several other places in the app with this issue, these are just some examples for now until I get some feedback.

[github-actions]

PR Validation Results

Change Detection

• 📱 Mobile changes detected

✅ All checks passed. Thank you!

[CodeWithCJ]

This PR is still in failed CI test and in draft mode. Just wanted to let you know if you haven't noticed already as I see another PR from you.

[andersmmg]

@CodeWithCJ Do you have any thoughts on the method of workaround? It's mostly still in draft because I've been looking into different workarounds and coming up empty lol. I just don't love the idea of adding a space at the end of each one that's cut off

[CodeWithCJ]

I use just iPhone 13 mini and 15 pro max. Both looks fine. I don't have android device apart from the simulator for it. So never noticed this before.

@apedley could you suggest fix for this.

[andersmmg]

Yeah it's a very weird issue. It's a decade old too lol. I know one of the fixes is bundling roboto with the app which I might look into how that works as well

[apedley]

I don't have a Samsung or OnePlus to test on unfortunately but I looked into the issues. This more recent one is a RN regression for android 15 which I believe causes this problem. I also found a feature flag called fixTextClippingAndroid15useBoundsForWidth which might fix it. It would need a expo config plugin to enable. I've put an example on a branch here. Since I don't have a device could you check to see if it works? If it doesn't I have a couple other ideas.

[andersmmg]

Tried a new dev build with your branch, unfortunately did not seem to make any difference.

[apedley]

Tried a new dev build with your branch, unfortunately did not seem to make any difference.

You ran npx expo prebuild --clean to load the new config plugin right? Just making sure. And are you running Android 15 or 16? If its 15 I have another fix idea on the render side I can push to a branch just let me know.

[andersmmg]

Yeah, I even tried a fully fresh clone and build to be sure. I'm running Android 16

[apedley]

Could you fetch the branch, prebuild (with --clean to load the module) and check again? https://github.com/apedley/SparkyFitness/tree/fix-1905-text-clipping

Turns out that feature flag was removed from react native so I'm targeting the styles.xml using a workaround from the RN thread that was confirmed working on Samsung Android 15 by a few people. Are you using the default system font or a custom one from the oem font picker? If this doesn't work then I'll look into bundling the font. I had been considering swapping to Plus Jakarta Sans anyway.

[andersmmg]

Unfortunately did not fix it. Verified I pulled the latest changes, did a full clean build

[andersmmg]

Oh and I'm using the default system font, the one labeled "Default" not sure what font that is on Samsung.

[apedley]

Unfortunately did not fix it. Verified I pulled the latest changes, did a full clean build

Could you check one more time with my branch? I've bundled Roboto and want to know if this fixes it before committing to it.

[andersmmg]

I think some places are better? I tested setting a custom font, and it still uses the system font in a lot of places, most of which are the places that are cut off

[apedley]

I think some places are better? I tested setting a custom font, and it still uses the system font in a lot of places, most of which are the places that are cut off

I didn't replace all the fonts just the bold weights for the test. The thought behind this is that android is using fake bold because the system fonts don't ship with real cuts for those weights. Can you take a screenshot of the clipped text and one thats medium/bold/semibold. And what model is the phone?

This kind of seems like it might be a different bug from one of the 2 we had originally thought. I'll keep looking

[apedley]

@andersmmg i checked the app on a Samsung and didn’t see anything cut off