TextInput style is not updating if there is an emoji in text value

Question

TextInput style is not updating if there is an emoji in text value however without emoji the text value color is updating. I would like to know why this issue is happening? Is it react-native issue or I am doing something wrong?

React Native Environment Info:
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
Memory: 151.51 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.2.0 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 27, 28
Build Tools: 28.0.3, 29.0.0
System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.6 => 16.8.6
react-native: 0.58.6 => 0.58.6
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native: 0.59.9

Please open the expo snack and write text with emoji and without emoji and you will see what's the issue right away.

https://snack.expo.io/@hamzashahbaz/textinput-error

Maciej Trojniarz · Answer 1 · 2019-09-05T10:00:56.420

0

Your code looks correct. this might be really react-native ios issue which you have already raised: github.com/facebook/react-native/issues/25874

edited Sep 05 '19 at 10:00

answered Sep 04 '19 at 15:36

Maciej Trojniarz

702
4
14

So it doesn't work only on iOS simulator. Have you tried it on real device maybe? – Maciej Trojniarz Sep 04 '19 at 19:51
Try IOS and Android. https://snack.expo.io/@hamzashahbaz/textinput-error – Hamza Shahbaz Sep 04 '19 at 19:51
Yes, I tried it on real devices. it is not working. – Hamza Shahbaz Sep 04 '19 at 19:52
Looks like you have already raised this issue ~month ago: https://github.com/facebook/react-native/issues/25874. Looks like this is really the issue with ios implementation of react-native as only on ios it doesn't work. – Maciej Trojniarz Sep 04 '19 at 20:37
Getting the same issue on 0.62.2. Any solution? – Kasra Sep 08 '20 at 08:52

Leonardo Russo · Answer 2 · 2022-05-04T16:59:14.833

I had a similar issue with emojis on an TextInput that was highlighting hashtags. After a few days, my solution was to remove this:

  [oldText enumerateAttribute:@"NSOriginalFont" inRange:NSMakeRange(0, oldText.length) options:0 usingBlock:^(id value, NSRange range, BOOL *stop) {
    if (value){
      fontHasBeenUpdatedBySystem = true;
    }
  }];

from here:

https://github.com/facebook/react-native/blob/main/Libraries/Text/TextInput/RCTBaseTextInputView.m#L112-L116

After that, I also used the patch-package and postinstall libraries to create a patch and apply it automatically after installing all the libraries.

TextInput style is not updating if there is an emoji in text value

2 Answers2