Skip to content

Commit 012d92d

Browse files
committed
add errorMessage to ReactTextUpdate and maybeSetErrorMessage
allow to display error message on TextInput triggered in a onChangeText callback. Fixes issue explained in: fabOnReact/react-native-notes#12 (comment) Related links: fabOnReact/react-native-notes#12 (comment) fabOnReact@d3d54e1
1 parent c5762a7 commit 012d92d

File tree

7 files changed

+49
-12
lines changed

7 files changed

+49
-12
lines changed

Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -698,6 +698,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
698698
inlineImageLeft: true,
699699
editable: true,
700700
fontVariant: true,
701+
android_errorMessage: true,
701702
borderBottomRightRadius: true,
702703
borderBottomColor: {process: require('../../StyleSheet/processColor')},
703704
borderRadius: true,

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ public class ViewProps {
8484
public static final String BACKGROUND_COLOR = "backgroundColor";
8585
public static final String FOREGROUND_COLOR = "foregroundColor";
8686
public static final String COLOR = "color";
87-
public static final String ERROR_MESSAGE = "errorMessage";
87+
public static final String ANDROID_ERROR_MESSAGE = "android_errorMessage";
8888
public static final String FONT_SIZE = "fontSize";
8989
public static final String FONT_WEIGHT = "fontWeight";
9090
public static final String FONT_STYLE = "fontStyle";

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
import android.text.Layout;
1313
import android.text.Spannable;
14+
import javax.annotation.Nullable;
1415

1516
/**
1617
* Class that contains the data needed for a text update. Used by both <Text/> and <TextInput/>
@@ -30,6 +31,7 @@ public class ReactTextUpdate {
3031
private final int mSelectionStart;
3132
private final int mSelectionEnd;
3233
private final int mJustificationMode;
34+
private @Nullable String mErrorMessage;
3335

3436
public boolean mContainsMultipleFragments;
3537

@@ -59,7 +61,8 @@ public ReactTextUpdate(
5961
Layout.BREAK_STRATEGY_HIGH_QUALITY,
6062
Layout.JUSTIFICATION_MODE_NONE,
6163
-1,
62-
-1);
64+
-1,
65+
null);
6366
}
6467

6568
public ReactTextUpdate(
@@ -85,7 +88,8 @@ public ReactTextUpdate(
8588
textBreakStrategy,
8689
justificationMode,
8790
-1,
88-
-1);
91+
-1,
92+
null);
8993
}
9094

9195
public ReactTextUpdate(
@@ -107,7 +111,8 @@ public ReactTextUpdate(
107111
textBreakStrategy,
108112
justificationMode,
109113
-1,
110-
-1);
114+
-1,
115+
null);
111116
}
112117

113118
public ReactTextUpdate(
@@ -122,7 +127,8 @@ public ReactTextUpdate(
122127
int textBreakStrategy,
123128
int justificationMode,
124129
int selectionStart,
125-
int selectionEnd) {
130+
int selectionEnd,
131+
@Nullable String errorMessage) {
126132
mText = text;
127133
mJsEventCounter = jsEventCounter;
128134
mContainsImages = containsImages;
@@ -135,6 +141,7 @@ public ReactTextUpdate(
135141
mSelectionStart = selectionStart;
136142
mSelectionEnd = selectionEnd;
137143
mJustificationMode = justificationMode;
144+
mErrorMessage = errorMessage;
138145
}
139146

140147
public static ReactTextUpdate buildReactTextUpdateFromState(
@@ -143,15 +150,21 @@ public static ReactTextUpdate buildReactTextUpdateFromState(
143150
int textAlign,
144151
int textBreakStrategy,
145152
int justificationMode,
146-
boolean containsMultipleFragments) {
153+
boolean containsMultipleFragments,
154+
@Nullable String errorMessage) {
147155

148156
ReactTextUpdate reactTextUpdate =
149157
new ReactTextUpdate(
150158
text, jsEventCounter, false, textAlign, textBreakStrategy, justificationMode);
151159
reactTextUpdate.mContainsMultipleFragments = containsMultipleFragments;
160+
reactTextUpdate.mErrorMessage = errorMessage;
152161
return reactTextUpdate;
153162
}
154163

164+
public @Nullable String getErrorMessage() {
165+
return mErrorMessage;
166+
}
167+
155168
public Spannable getText() {
156169
return mText;
157170
}

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -509,6 +509,20 @@ public void maybeSetTextFromJS(ReactTextUpdate reactTextUpdate) {
509509
mIsSettingTextFromJS = false;
510510
}
511511

512+
/**
513+
* Attempt to set an error message or fail silently. EventCounter is the same one used as with
514+
* text.
515+
*
516+
* @param eventCounter
517+
* @param errorMessage
518+
*/
519+
public void maybeSetErrorMessage(int eventCounter, String errorMessage) {
520+
if (!canUpdateWithEventCount(eventCounter) || getError() == errorMessage) {
521+
return;
522+
}
523+
setError(errorMessage);
524+
}
525+
512526
public void maybeSetTextFromState(ReactTextUpdate reactTextUpdate) {
513527
mIsSettingTextFromState = true;
514528
maybeSetText(reactTextUpdate);

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@ private ReactTextUpdate getReactTextUpdate(
325325
sb.append(TextTransform.apply(text, TextTransform.UNSET));
326326

327327
return new ReactTextUpdate(
328-
sb, mostRecentEventCount, false, 0, 0, 0, 0, Gravity.NO_GRAVITY, 0, 0, start, end);
328+
sb, mostRecentEventCount, false, 0, 0, 0, 0, Gravity.NO_GRAVITY, 0, 0, start, end, null);
329329
}
330330

331331
@Override
@@ -369,11 +369,12 @@ public void updateExtraData(ReactEditText view, Object extraData) {
369369

370370
view.maybeSetTextFromState(update);
371371
view.maybeSetSelection(update.getJsEventCounter(), selectionStart, selectionEnd);
372+
view.maybeSetErrorMessage(update.getJsEventCounter(), update.getErrorMessage());
372373
}
373374
}
374375

375-
@ReactProp(name = ViewProps.ERROR_MESSAGE)
376-
public void setAndroidErrorMessage(ReactEditText view, String error) {
376+
@ReactProp(name = ViewProps.ANDROID_ERROR_MESSAGE)
377+
public void setErrorMessage(ReactEditText view, String error) {
377378
view.setError(error);
378379
}
379380

@@ -1325,12 +1326,19 @@ public Object updateState(
13251326
int textBreakStrategy =
13261327
TextAttributeProps.getTextBreakStrategy(paragraphAttributes.getString("textBreakStrategy"));
13271328

1329+
@Nullable
1330+
String errorMessage =
1331+
props.hasKey(ViewProps.ANDROID_ERROR_MESSAGE)
1332+
? props.getString(ViewProps.ANDROID_ERROR_MESSAGE)
1333+
: null;
1334+
13281335
return ReactTextUpdate.buildReactTextUpdateFromState(
13291336
spanned,
13301337
state.getInt("mostRecentEventCount"),
13311338
TextAttributeProps.getTextAlignment(props, TextLayoutManager.isRTL(attributedString)),
13321339
textBreakStrategy,
13331340
TextAttributeProps.getJustificationMode(props),
1334-
containsMultipleFragments);
1341+
containsMultipleFragments,
1342+
errorMessage);
13351343
}
13361344
}

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,8 @@ public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) {
246246
mTextBreakStrategy,
247247
mJustificationMode,
248248
mSelectionStart,
249-
mSelectionEnd);
249+
mSelectionEnd,
250+
null);
250251
uiViewOperationQueue.enqueueUpdateExtraData(getReactTag(), reactTextUpdate);
251252
}
252253
}

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -483,7 +483,7 @@ function ErrorExample(): React.Node {
483483
Type error in the below TextInput to display an error message.
484484
</Text>
485485
<TextInput
486-
errorMessage={error}
486+
android_errorMessage={error}
487487
onBlur={() => setError('onBlur')}
488488
onEndEditing={() => setError('onEndEditing')}
489489
onChangeText={newText => {

0 commit comments

Comments
 (0)