From ad9dc3e1924edcf95e61a9b9fe095192ce74f982 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Fri, 4 Mar 2022 17:04:10 +0800 Subject: [PATCH 001/129] draft - testing functionality --- Libraries/Components/TextInput/TextInput.js | 1 + .../java/com/facebook/react/uimanager/ViewDefaults.java | 1 + .../main/java/com/facebook/react/uimanager/ViewProps.java | 1 + .../react/views/textinput/ReactTextInputManager.java | 7 +++++++ 4 files changed, 10 insertions(+) diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 4e781fb66bcf86..67fa65195f55c1 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -1281,6 +1281,7 @@ function InternalTextInput(props: Props): React.Node { * match up exactly with the props for TextInput. This will need to get * fixed */ Date: Mon, 7 Mar 2022 07:20:12 +0800 Subject: [PATCH 002/129] draft --- Libraries/Components/TextInput/TextInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 67fa65195f55c1..be05bc51078153 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -1281,7 +1281,7 @@ function InternalTextInput(props: Props): React.Node { * match up exactly with the props for TextInput. This will need to get * fixed */ Date: Sat, 12 Mar 2022 15:33:38 +0800 Subject: [PATCH 004/129] applying same solution from PR 28952 calling setError does not display an error if the TextInput is a controlled component. https://reactnative.dev/docs/textinput#value >The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker. ```javascript function ErrorExample(): React.Node { const [text, setText] = React.useState(''); const [error, setError] = React.useState(null); return ( { setText(newText); setError(newText === 'error' ? 'this input is invalid' : null); }} value={text} /> ); } ``` The solution from pr https://github.com/facebook/react-native/pull/28952 fixes this issue and forces the update by invalidating the TextInput instance which triggers onAttachedToWindow() To be noticed that there is logic to trigger this updates in the ReactTextInputManager https://github.com/fabriziobertoglio1987/react-native/blob/60b6c9be8e811241039a6db5dc906a0e88e6ba82/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L1291-L1292 The PR was previously accepted and could be an acceptable solution for this issue --- .../java/com/facebook/react/uimanager/ViewProps.java | 2 +- .../facebook/react/views/textinput/ReactEditText.java | 9 +++++++++ .../react/views/textinput/ReactTextInputManager.java | 4 +--- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java index afeadb6c70b9be..c020abdde30129 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java @@ -84,7 +84,7 @@ public class ViewProps { public static final String BACKGROUND_COLOR = "backgroundColor"; public static final String FOREGROUND_COLOR = "foregroundColor"; public static final String COLOR = "color"; - public static final String ERROR_MESSAGE = "error"; + public static final String ERROR_MESSAGE = "errorMessage"; public static final String FONT_SIZE = "fontSize"; public static final String FONT_WEIGHT = "fontWeight"; public static final String FONT_STYLE = "fontStyle"; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java index 360de688d54849..e54f836e9b64c5 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java @@ -122,6 +122,7 @@ public class ReactEditText extends AppCompatEditText private static final KeyListener sKeyListener = QwertyKeyListener.getInstanceForFullKeyboard(); private @Nullable EventDispatcher mEventDispatcher; + private @Nullable String mErrorMessage = null; public ReactEditText(Context context) { super(context); @@ -886,6 +887,8 @@ public void onAttachedToWindow() { requestFocusInternal(); } + setError(mErrorMessage); + mDidAttachToWindow = true; } @@ -1068,6 +1071,12 @@ void setEventDispatcher(@Nullable EventDispatcher eventDispatcher) { mEventDispatcher = eventDispatcher; } + public void setErrorMessage(String error) { + mErrorMessage = error; + setError(mErrorMessage); + invalidate(); + } + /** * This class will redirect *TextChanged calls to the listeners only in the case where the text is * changed by the user, and not explicitly set by JS. diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java index 0f08f88e5ba5ae..5a0507a3305128 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java @@ -374,9 +374,7 @@ public void updateExtraData(ReactEditText view, Object extraData) { @ReactProp(name = ViewProps.ERROR_MESSAGE) public void setAndroidErrorMessage(ReactEditText view, String error) { - if (error != null) { - view.setError(error); - } + view.setErrorMessage(error); } @ReactProp(name = ViewProps.FONT_SIZE, defaultFloat = ViewDefaults.FONT_SIZE_SP) From f22e1f3201a94d8f6ef8dd6326db4524d3f3baba Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Sat, 12 Mar 2022 15:42:01 +0800 Subject: [PATCH 005/129] adding ErrorExample to TextInputSharedExamples --- .../TextInput/TextInputSharedExamples.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js index 19e758f2a7dd5a..e06ba8806d03e9 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js @@ -473,7 +473,28 @@ class SelectionExample extends React.Component< } } +function ErrorExample(): React.Node { + const [text, setText] = React.useState(''); + const [error, setError] = React.useState(null); + return ( + { + setText(newText); + setError(newText === 'error' ? 'this input is invalid' : null); + }} + value={text} + /> + ); +} + module.exports = ([ + { + title: 'Error Message', + render: function (): React.Node { + return ; + }, + }, { title: 'Auto-focus', render: function (): React.Node { From 06c490886fea28c950816e6a1cfb64865c13a56f Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 16 Mar 2022 10:36:39 +0800 Subject: [PATCH 006/129] Android NDK: Module react_codegen_rncore depends on undefined modules: folly_json ``` /home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:651: Android NDK: Module react_codegen_rncore depends on undefined modules: folly_json /home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:664: *** Android NDK: Note that old versions of ndk-build silently ignored this error case. If your project worked on those versions, the missing libraries were not needed and you can remove those dependencies from the module to fix your build. Alternatively, set APP_ALLOW_MISSING_DEPS=true to allow missing dependencies. . Stop. ``` I applied solution in https://stackoverflow.com/a/48897133/7295772 but now caused this error ``` make: *** [/home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:725: /home/fabrizio/.gradle/build/react-native-github/ReactAndroid/intermediates/cxx/Debug/83t124q6/obj/local/x86/libreact_codegen_rncore.so] Error 1 make: *** Waiting for unfinished jobs.... ``` Full Logs ``` FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':ReactAndroid:configureNdkBuildDebug[x86]'. > [CXX1405] error when building with ndkBuild using /home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/src/main/jni/react/jni/Android.mk: Build command failed. Error while executing process /home/fabrizio/Android/Sdk/ndk/21.4.7075529/ndk-build with arguments {NDK_PROJECT_PATH=null APP_BUILD_SCRIPT=/home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/src/main/jni/react/jni/Android.mk NDK_GRADLE_INJECTED_IMPORT_PATH=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/.cxx/Debug/83t124q6/prefab/x86 APP_ABI=x86 NDK_ALL_ABIS=x86 NDK_DEBUG=1 APP_PLATFORM=android-21 NDK_OUT=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/intermediates/cxx/Debug/83t124q6/obj NDK_LIBS_OUT=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/intermediates/cxx/Debug/83t124q6/lib NDK_APPLICATION_MK=/home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/src/main/jni/Application.mk THIRD_PARTY_NDK_DIR=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/third-party-ndk REACT_COMMON_DIR=/home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/../ReactCommon REACT_GENERATED_SRC_DIR=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/generated/source REACT_SRC_DIR=/home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/src/main/java/com/facebook/react APP_STL=c++_shared -j8 APP_SHORT_COMMANDS=false LOCAL_SHORT_COMMANDS=false -B -n} /home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:651: Android NDK: Module react_codegen_rncore depends on undefined modules: folly_json /home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:664: *** Android NDK: Note that old versions of ndk-build silently ignored this error case. If your project worked on those versions, the missing libraries were not needed and you can remove those dependencies from the module to fix your build. Alternatively, set APP_ALLOW_MISSING_DEPS=true to allow missing dependencies. . Stop. ``` ``` ../ReactCommon/react/nativemodule/core/../../../react/renderer/core/RawValue.h:249: error: undefined reference to 'folly::dynamic::size() const' /home/fabrizio/.gradle/build/react-native-github/ReactAndroid/third-party-ndk/folly/folly/dynamic-inl.h:356: error: undefined reference to 'folly::dynamic::operator=(folly::dynamic&&)' ../ReactCommon/react/nativemodule/core/../../../react/renderer/core/RawValue.h:249: error: undefined reference to 'folly::dynamic::size() const' clang++: error: linker command failed with exit code 1 (use -v to see invocation) make: *** [/home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:725: /home/fabrizio/.gradle/build/react-native-github/ReactAndroid/intermediates/cxx/Debug/83t124q6/obj/local/x86/libreact_codegen_rncore.so] Error 1 make: *** Waiting for unfinished jobs.... ``` --- ReactAndroid/src/main/jni/Application.mk | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ReactAndroid/src/main/jni/Application.mk b/ReactAndroid/src/main/jni/Application.mk index 40ff08e84acbe2..70c73bcb170f5d 100644 --- a/ReactAndroid/src/main/jni/Application.mk +++ b/ReactAndroid/src/main/jni/Application.mk @@ -32,3 +32,5 @@ APP_CPPFLAGS := -std=c++1y APP_LDFLAGS := -Wl,--build-id NDK_TOOLCHAIN_VERSION := clang + +APP_ALLOW_MISSING_DEPS :=true From d1b6182724826da9492117199198761a7ed1dbff Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 23 Mar 2022 12:22:14 +0800 Subject: [PATCH 007/129] Revert "Android NDK: Module react_codegen_rncore depends on undefined modules: folly_json" This reverts commit 06c490886fea28c950816e6a1cfb64865c13a56f. --- ReactAndroid/src/main/jni/Application.mk | 2 -- 1 file changed, 2 deletions(-) diff --git a/ReactAndroid/src/main/jni/Application.mk b/ReactAndroid/src/main/jni/Application.mk index 70c73bcb170f5d..40ff08e84acbe2 100644 --- a/ReactAndroid/src/main/jni/Application.mk +++ b/ReactAndroid/src/main/jni/Application.mk @@ -32,5 +32,3 @@ APP_CPPFLAGS := -std=c++1y APP_LDFLAGS := -Wl,--build-id NDK_TOOLCHAIN_VERSION := clang - -APP_ALLOW_MISSING_DEPS :=true From 3092ac87560123e0b1be2e5b68618665e3cc1417 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Fri, 18 Mar 2022 10:51:13 +0800 Subject: [PATCH 008/129] testing solution from https://github.com/facebook/react-native/pull/29070 --- .../com/facebook/react/views/textinput/ReactEditText.java | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java index e54f836e9b64c5..538c026bb47414 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java @@ -565,7 +565,10 @@ public void maybeSetText(ReactTextUpdate reactTextUpdate) { // When we update text, we trigger onChangeText code that will // try to update state if the wrapper is available. Temporarily disable // to prevent an infinite loop. - getText().replace(0, length(), spannableStringBuilder); + int startPosition = getSelectionStart(); + int endPosition = getSelectionEnd(); + setText(spannableStringBuilder); + maybeSetSelection(mNativeEventCount, startPosition, endPosition); } mDisableTextDiffing = false; From e5218599c41bda946935ec2943dddbeed4d43242 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Fri, 18 Mar 2022 11:10:34 +0800 Subject: [PATCH 009/129] restore original example --- .../TextInput/TextInputSharedExamples.js | 31 ++++++++++++++----- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js index e06ba8806d03e9..498f79d42444a4 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js @@ -476,15 +476,30 @@ class SelectionExample extends React.Component< function ErrorExample(): React.Node { const [text, setText] = React.useState(''); const [error, setError] = React.useState(null); + const textinput = React.useRef(null); + /* + React.useEffect(() => { + console.log('useEffect text: ' + text); + if (!!textinput && text.length > 7) { + setError(text); + console.log('setError() with text: ' + text); + } + }); + */ return ( - { - setText(newText); - setError(newText === 'error' ? 'this input is invalid' : null); - }} - value={text} - /> + <> +