[iOS] TextInput fontFamily issue with some keyboards in iOS
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
I'm not sure what the main cause of the issue is, but I ran into an issue with CJK keyboards in iOS, that the fontFamily is not set correctly.
const [text, setText] = useState("");
const fontFamily = !text ? "ZenMaruGothic" : "IMHyemin";
return (
<SafeAreaView>
<View style={styles.view}>
<TextInput
multiline
defaultValue={text}
onChangeText={setText}
placeholder="フォントテスト"
style={[styles.textInput, { fontFamily }]}
/>
{/* ... */}
When the text is typed on keyboards having "pending states" . That is, the state in which the text can be modified by the additional keystrokes and confirmed by the user to be finalized. Examples include:
- with the Chinese pinyin keyboard, one types
nhand selects 你好 to finalize the input - with the standard Korean (qwerty) keyboard, keystrokes
ㄱㅏyield가(U+AC00) in its pending states, and an additional keystrokeㄴmodifies it to be간(U+AC04)
As you can see in the video, when typed using the standard English keyboard, at the first keystroke, the letter is correctly styled with the provided font. But using Chinese/Japanese keyboards, the first keystroke does not change the font and the following keystrokes change it. Even worse, using the Korean keyboard, the font of the TextInput is not changed at all.
Steps to reproduce
Expo snack: https://snack.expo.dev/@kanukim/textinputfonttest
Issues with Korean characters:
- Open the project in an iOS device
- Add a Korean Keyboard (Standard)
- Type "한글" (FYI, you can type it by pressing ㅎㅏㄴㄱㅡㄹ in sequence)
- The fonts are not set correctly (as the text input below)
You may test the issue with various keyboards including Japanese (romaji) and Chinese (pinyin) inputs.
React Native Version
0.76.3
Affected Platforms
Runtime - iOS
Areas
Fabric - The New Renderer
Output of npx react-native info
System:
OS: macOS 15.1.1
CPU: (8) arm64 Apple M1
Memory: 206.56 MB / 8.00 GB
Shell:
version: 3.7.1
path: /opt/homebrew/bin/fish
Binaries:
Node:
version: 22.9.0
path: ~/.local/share/nvm/v22.9.0/bin/node
Yarn:
version: 1.22.22
path: ~/.bun/bin/yarn
npm:
version: 10.8.3
path: ~/.local/share/nvm/v22.9.0/bin/npm
Watchman:
version: 2024.09.09.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.1
- iOS 18.1
- macOS 15.1
- tvOS 18.1
- visionOS 2.1
- watchOS 11.1
Android SDK:
API Levels:
- "33"
- "34"
Build Tools:
- 30.0.3
- 33.0.0
- 33.0.1
- 34.0.0
Android NDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.18034.62.2411.12071903
Xcode:
version: 16.1/16B40
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.12
path: /opt/homebrew/opt/openjdk@17/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 16.0.0
wanted: latest
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.76.3
wanted: 0.76.3
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
No errors
Reproducer
https://snack.expo.dev/@kanukim/textinputfonttest
Screenshots and Videos
https://github.com/user-attachments/assets/dbd6a83a-4f22-45c3-aa61-f17c8c53f7bf
Please focus on the missing font changes at the first keystrokes.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Expo Snack and reproduce the issue on iOS using English, Chinese pinyin, Japanese, and Korean keyboards. Investigate the Fabric TextInput behavior around pending composition states; the issue is done when fontFamily changes on the first relevant keystrokes and remains correct for finalized CJK input.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100