Textinput placeholder doesn't scale with font on iOS

[frankfe-amsterdam]

Description

On iOS, the placeholder is not scaled with the font-size so its always shown in its entirety. I would expect a property to set this. Android works fine!

React Native Version

0.72.6

Output of npx react-native info

System: OS: macOS 14.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 28.94 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 16.20.2 path: ~/.nvm/versions/node/v16.20.2/bin/node Yarn: version: 1.22.19 path: /usr/local/bin/yarn npm: version: 8.19.4 path: ~/.nvm/versions/node/v16.20.2/bin/npm Watchman: version: 2023.05.08.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.13.0 path: /Users/Werk/.rbenv/shims/pod SDKs: iOS SDK: Platforms: - DriverKit 23.0 - iOS 17.0 - macOS 14.0 - tvOS 17.0 - watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8609683 Xcode: version: 15.0.1/15A507 path: /usr/bin/xcodebuild Languages: Java: version: 1.8.0_292 path: /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home/bin/javac Ruby: version: 3.1.4 path: /Users/Werk/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.6 wanted: 0.72.6 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Steps to reproduce

1. Create a TextInput component
2. Add a placeholder of about 20 characters
3. Increase font scale in OS settings
4. Verify that placeholder doesn't honour increased font size but is shown in its entirety
5. When you rotate to landscape mode, the font is increased because of the increase in space

Snack, screenshot, or link to a repository

https://github.com/Amsterdam/amsterdam-app-frontend

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[cipolleschi]

@frankfe-amsterdam Thanks for opening the issue. Are you using the new architecture or the old one?

[frankfe-amsterdam]

@frankfe-amsterdam Thanks for opening the issue. Are you using the new architecture or the old one?

We're still using the old one.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[anehustorov]

@frankfe-amsterdam Have you found a solution for this?

[cipolleschi]

Hi there! I did some checks and tests.

The current behavior is consistent with any native app on iOS:

React Native	Native iOS
https://github.com/user-attachments/assets/73f6d5b4-2647-40c3-bdba-3995cf0d5c21	https://github.com/user-attachments/assets/54b5658a-ba60-4bdb-ae12-d9d79de618e8

Funnily, the native property that let us control that behavior (adjustsFontSizeToFitWidth) is not accessible by SwiftUI on Text and TextInput components. So, this is actually the experience that Apple provides.