Open leozhang007 opened 6 years ago
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
@brickolicious can you fix it?
@95erlong its react-native issue, working for version 0.53.x
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?
This is caused by https://github.com/facebook/react-native/issues/18374. There is a pull request out to fix it on react native...
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.
@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?
@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.
@hamaron ok thank you! Any idea when the releases are typically done? Like monthly or?
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...
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?
@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).
@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?
@hamaron I'm using your repo, but still met this problem on Samsung Android Phone
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.
@amarw It not wokring with me My version:
@amarw Thank you, man. You are the lifesaver!
@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.
@amarw Thank you, man. My version: "react": "16.3.0-alpha.1", "react-native": "0.55.3",
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;
@amarw Thanks for the temporary workaround :) It works !
@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.
How are you generating the patch? Also, this issue is resolved in the latest react-native, right? Are you still using an older version?
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" } }