code input on react native 0.54.x bug

[leozhang007]

my package.json
{
"name": "captain",
"version": "0.0.1",
"private": true,
"scripts": {
"postinstall": "remotedev-debugger",
"start": "node node_modules/react-native/local-cli/cli.js start -- --reset-cache",
"test": "jest",
"ios": "react-native run-ios",
"ios8p": "react-native run-ios --simulator 'iPhone 8 Plus'",
"iosx": "react-native run-ios --simulator 'iPhone X'",
"link": "react-native link",
"bundle-ios": "react-native bundle --platform ios --entry-file index.js --bundle-output ./CodePush/main.jsbundle --assets-dest ./CodePush --dev false"
},
"dependencies": {
"@remobile/react-native-qrcode-local-image": "^1.0.4",
"lodash": "^4.17.5",
"mockjs": "^1.0.1-beta3",
"node-forge": "^0.7.4",
"prop-types": "^15.6.1",
"query-string": "^6.0.0",
"react": "16.2.0",
"react-native": "0.54.0",
"react-native-camera": "^0.13.0",
"react-native-code-push": "^5.3.2",
"react-native-confirmation-code-input": "^1.0.4",
"react-native-easy-toast": "^1.1.0",
"react-native-image-picker": "^0.26.7",
"react-native-keyboard-aware-scroll-view": "^0.4.4",
"react-native-qrcode": "^0.2.6",
"react-native-storage": "^0.2.2",
"react-native-svg": "^6.2.2",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.5.0",
"react-navigation": "^1.5.7",
"react-navigation-redux-helpers": "^1.0.3",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-actions": "^2.3.0",
"redux-persist": "^5.9.1",
"redux-thunk": "^2.2.0",
"remote-redux-devtools": "^0.5.12",
"teaset": "^0.5.6",
"victory-native": "^0.17.2"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-jest": "23.0.0-alpha.0",
"babel-plugin-module-resolver": "^3.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-remove-console": "^6.9.0",
"babel-preset-react-native": "4.0.0",
"jest": "23.0.0-alpha.0",
"react-native-clean-project": "^1.0.7",
"react-test-renderer": "16.2.0",
"remote-redux-devtools-on-debugger": "^0.8.3",
"remotedev-server": "^0.2.4"
},
"jest": {
"preset": "react-native"
}
}

[brickolicious]

I have the same thing on iOS only, android is fine.
Works fine until you fulfil it once after that going back and typing again doesn't trigger the state change

[leozhang007]

@brickolicious can you fix it?

[kasterlod]

@95erlong its react-native issue, working for version 0.53.x

[idrakimuhamad]

i'm on 0.54.4 and this still happening. I think the update fix a bug with TextInput, could it be some breaking changes?

[otusweb]

This is caused by facebook/react-native#18374. There is a pull request out to fix it on react native...

[hamaron]

Yes, this issue should be fixed after facebook/react-native#18627 gets merged and your app uses the next version of RN with the fix.

[thomasledoux1]

@hamaron Any idea when the merge would occur? 1 check for Android seems to be failing in the CI, is this why the merge has not happened yet?

[hamaron]

@thomasledoux1
I actually don't know. The change I made was irrelevant because I modified only the iOS code, and the android build had been broken when I committed the bug fix.
But I believe the bug fix is going out in the next release.

[thomasledoux1]

@hamaron ok thank you! Any idea when the releases are typically done? Like monthly or?

[hamaron]

They monthly update the library, and I guess the next release will happen in a couple of weeks.
The thing is the PR didn't get merged yet... Could be pushed to the next next release...

[wangxpert]

I am using the latest react and react-native version, but it's still not working....
"react": "^16.3.0-alpha.1",
"react-native": "0.54.4",

But it's still not working...
What can I do in this case?

[hamaron]

@zootopia106 The latest version hasn't included the bug fix yet. I'm using my own fork in which I applied a couple of the bug fixes I made on react-native 0.55.4. You can import the fork at your own risk by changing your package.json like so:

"react-native": "https://github.com/hamaron/react-native.git#0.55-stable+hotfix",

Don't forget to point the dependency back to the original one after the react-native library gets updated including my bug fix(I assume that's gonna happen within a couple of month).

[havinhthai]

@hamaron
So, Now I using "react-native": "https://github.com/hamaron/react-native.git#0.55-stable+hotfix" while wait next version of RN, right?

[SNY7]

@hamaron I'm using your repo, but still met this problem on Samsung Android Phone

[amarw]

If anyone else is interested, below is a workaround I applied in _onKeyPress function. Would not need to use this once hamaron's PR is merged by RN team.

_onKeyPress(e) {
    if (e.nativeEvent.key === 'Backspace') {
      // Return if duration between previous key press and backspace is less than 20ms
      if (Math.abs(this.lastKeyEventTimestamp - e.timeStamp) < 20) return;

      const { currentIndex } = this.state;
      const nextIndex = currentIndex > 0 ? currentIndex - 1 : 0;
      this._setFocus(nextIndex);
    } else {
      // Record non-backspace key event time stamp
      this.lastKeyEventTimestamp = e.timeStamp;
    }
  }

TextInput bug in RN fires an additional backspace event after valid key event. I found by debugging that time duration while receiving stray backspace event is less than ~10ms. So I record the non-backspace key event timeStamp and use it to compare with backspace event timeStamp. If the difference between these two is less than 20ms (arbitrary value > 10ms) then I return without processing focus change.

[havinhthai]

@amarw It not wokring with me
My version:

• React: 16.3.1
• React-native: 0.55.2
• React-native-confirmation-code-input: 1.0.4

[max-pv]

@amarw Thank you, man. You are the lifesaver!

[amarw]

@havinhthai you need to create a fork of react-native-confirmation-code-input and replace the _onKeyPress function (in ConfirmationCodeInput.js) with the workaround code.

[jianxinzhoutiti]

@amarw Thank you, man.
My version:
"react": "16.3.0-alpha.1",
"react-native": "0.55.3",

[ujwal-setlur]

I just used the awesome patch-package to create a patch and store it in the patches directory that gets run every time node_modules gets installed using yarn or npm:

--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m
+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m
@@ -268,7 +268,12 @@
 
   NSString *previousText = [_predictedText substringWithRange:range] ?: @"";
 
-  if (_predictedText) {
+  // After clearing the text by replacing it with an empty string, `_predictedText`
+  // still preserves the deleted text.
+  // As the first character in the TextInput always comes with the range value (0, 0),
+  // we should check the range value in order to avoid appending a character to the deleted string
+  // (which caused the issue #18374)
+  if (!NSEqualRanges(range, NSMakeRange(0, 0)) && _predictedText) {
     _predictedText = [_predictedText stringByReplacingCharactersInRange:range withString:text];
   } else {
     _predictedText = text;

[theebi]

@amarw Thanks for the temporary workaround :) It works !

[andrejunqueira1]

@ujwal-setlur i'm trying to use patch-package, but when i patch the react-native it generates a large .patch file, there some trick to reduce the size of the generated file ? Thanks in advanced.

[ujwal-setlur]

How are you generating the patch? Also, this issue is resolved in the latest react-native, right? Are you still using an older version?