(Android) crash on TextInput onKeyPress when inputting an emoji via auto-complete

[akalin-keybase]

On 0.53.0 and later, including 0.54.2, if I input an emoji into a TextInput via auto-complete, the app crashes.

I've tracked down the root cause; I'll put more details in a follow-up comment.

Environment

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 9.7.1
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.53.3 => 0.53.3

Expected Behavior

No crash!

Actual Behavior

Crash stack:

Error calling RCTEventEmitter.receiveEvent

Failed to create Value from JSON: 
run
    NativeRunnable.java
handleCallback
    Handler.java:790
dispatchMessage
    Handler.java:99
dispatchMessage
    MessageQueueThreadHandler.java:31
loop
    Looper.java:164
run
    MessageQueueThreadImpl.java:194
run
    Thread.java:764

Steps to Reproduce

Fortunately, this repros with the example project from #18262 .

• Clone and run this repo https://github.com/lxcid/ReactNative-AndroidKeyPress
• Make sure you have an Android device attached for debugging.
• react-native run-android
• select the TextInput
• type 'potato'
• tap the potato emoji that shows up in autocomplete.

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.54.0?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[akalin-keybase]

Yes, I can repro with 0.54.2.

[akalin-keybase]

So the "Failed to create value from JSON: " exception is thrown from:

react-native/ReactCommon/jschelpers/Value.cpp

Line 74 in 0ee502d

"Failed to create Value from JSON: ", json.str()).c_str());

(i.e., it's trying to parse JSON from an empty string)

Debugging this code, this is called from:

react-native/ReactCommon/jschelpers/Value.cpp

Line 98 in 0ee502d

return fromJSON(String(ctx, json.c_str()));

The conversion to JSON produces the string:

[258,"topKeyPress",{"key":"�"}]

(I'm not 100% sure if the �, which is supposed to be the potato emoji, is messed up because of the JSON conversion messing up or my debugging output.)

It is the String(ctx, json.c_str()) conversion that is failing and returning an empty string. This leads to the line

react-native/ReactCommon/jschelpers/Value.h

Line 32 in 0ee502d

: m_context(context), m_string(JSC_JSStringCreateWithUTF8CString(context, utf8)) {}

so it looks like JSC_JSStringCreateWithUTF8CString is having problems with the emoji character.

[akalin-keybase]

Digging into the git history, this C++ code has been around forever. So why is it only showing up now? I'm almost certain it's because of this commit included in 0.53.0: c9ff0bc . It implements the onKeyPress events for Android, and this line c9ff0bc#diff-6bb282dadefaebe4c849ce7b47fa47a0R44 triggers the C++ code above.

Paging @joshyhargreaves who implemented the above commit. Do you know of any way to work around this bug, i.e. turn off the Android keypress events?

[akalin-keybase]

Also, if I set USE_FAST_FOLLY_DYNAMIC_CONVERSION to make the C++ code go through this path:

react-native/ReactCommon/jschelpers/Value.cpp

Line 84 in 0ee502d

#if USE_FAST_FOLLY_DYNAMIC_CONVERSION

and comment out everything in that block but

react-native/ReactCommon/jschelpers/Value.cpp

Line 92 in 0ee502d

JSValueRef jsVal = Value::fromDynamicInner(ctx, value);

, that fixes the problem. I don't know all the consequences of turning that on in general, though.

[joshjhargreaves]

@akalin-keybase thank you for reporting & providing a great error report!

Hmm, wow this is interesting! I'll do some debugging and see what I can find. You're right right it is unclear as to why this is only happening now. Is this bug reproducible on android simulators from your findings?

Yep so I can put together a quick PR that disables this codepath unless explicitly enabled, which would probably be for the best. It'd obviously be good to get to the bottom of why this is happening also. @hramos what do you think?

[akalin-keybase]

Yeap, it's reproducible with the android simulator. Yeah, a PR to disable the codepath unless needed seems like a good idea, thanks!

[joshjhargreaves]

@akalin-keybase, I’m going to get to this today or tomorrow.

[joshjhargreaves]

@akalin-keybase @hramos I opened a PR to disable the onKeyPress logic, any thoughts and comments on that would be great 💯.

I'm also going to have a look into the onKeyPress logic, it looks like the logic itself doesn't work particularly well with unicode characters as it assumes key's pressed can only have a width of 1.
The potato emoji, as per the character string is encoded in java as '\uD83E\uDD54' which results in two characters in the text input, and the key emitted will be the second of those two (\uDD54). There may be something wrong with the value conversion itself, but it's never been an issue for the onChangeText callback.

[mjmasn]

@joshyhargreaves @akalin-keybase I think we've hit this issue here although not with autocomplete, seems just using the emoji keyboard does the trick and causes a crash with the Failed to create Value from JSON error.

Can only replicate if the app is running on-device, and only so far with the stock android keyboard. Swiftkey and Samsung keyboard seem to be immune, as does any keyboard if the app is running in the Chrome devtools debugger.

[tarouboy]

@joshyhargreaves thanks a lot for the commit, it reduced the crashes a lot after applying that.
However, it still happens and shows up on Crashlytics ( Caused by com.facebook.jni.CppException
Failed to create Value from JSON: )

My TextInput is uncontrolled with just onChangeText & styles props. I don't know if it helps.
This bug is really annoying. Considering a user typing a long message and it suddenly just crashes.

Hope someone will be able to fix it soon.

[joshjhargreaves]

@kevinkevw hmm, that is strange.
@akalin-keybase have you seen crashes since 0.56?

[akalin-keybase]

we're not on 0.56 yet, unfortunately (we had to branch and patch a few other bugs ourselves)

[tarouboy]

@akalin-keybase Do you have any solution for now? I have applied the commit that disabled the onKeyPress event but it still happens 😢

[joshjhargreaves]

@kevinkevw, to sanity check this you never create the InputConnection at all. However I do highly suspect there is another cause.

[tarouboy]

@joshyhargreaves How to check? I am not sure what InputConnection is.

[joshjhargreaves]

@kevinkevw, stupid question, but are you building react native from source for Android?

[tarouboy]

@joshyhargreaves No, I build by react-native run-android.
Update: I just found out the way to build from source. will try soon, thanks.

[kevtran410]

I got this error when delete emoji in TextInput, anyone have a solution to fix that bug
My system on react-native 0.55.4 and can't upgrade to latest version right now because of getting bugs in another part.

[danielreuterwall]

Just upgraded to 0.56 and the problems seems to have been resolved.

[tandat2209]

Any workarounds other than upgrade to 0.56 ??

[Diego-Franco]

@danielreuterwall did you tried on a Pixel device? I'm still seeing this crash on a Pixel phone, I Tested on Motorola and is working

[NicWickman]

Upgrading to 0.56 is not an option for me at the moment. Is there a fix I can do myself?

[yogini-bende]

Any updates on this issue @joshjhargreaves @akalin-keybase ? I am still searching to find some workaround for this issue. I am using react-native 0.55.2.

[github-actions]

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]

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