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 https://github.com/facebook/react-native/issues/18374. There is a pull request out to fix it on react native...

[hamaron]

Yes, this issue should be fixed after https://github.com/facebook/react-native/issues/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

[br4in3x]

@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?