react / react/react-native

[iOS] TextInput fontFamily issue with some keyboards in iOS

Đang mở
#48,154 3 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

API: Keyboard Component: TextInput Issue: Author Provided Repro Platform: iOS
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

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 nh and 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:

  1. Open the project in an iOS device
  2. Add a Korean Keyboard (Standard)
  3. Type "한글" (FYI, you can type it by pressing ㅎㅏㄴㄱㅡㄹ in sequence)
  4. 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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với Expo Snack được liên kết và tái hiện vấn đề trên iOS bằng bàn phím tiếng Anh, tiếng Trung pinyin, tiếng Nhật và tiếng Hàn. Điều tra hành vi của Fabric TextInput liên quan đến các trạng thái soạn thảo đang chờ; vấn đề được xem là hoàn tất khi fontFamily thay đổi ở những lần nhấn phím liên quan đầu tiên và vẫn chính xác đối với dữ liệu nhập CJK đã hoàn tất.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
32/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.