Skip to content

Instantly share code, notes, and snippets.

@chih
Last active November 2, 2024 22:18
Show Gist options
  • Save chih/3aa8b3bbd490137a31f0b864eff1532e to your computer and use it in GitHub Desktop.
Save chih/3aa8b3bbd490137a31f0b864eff1532e to your computer and use it in GitHub Desktop.
Adding showDoneButton property to react native's TextInput for number fields
diff --git a/node_modules/react-native/Libraries/Text/RCTTextField.h b/node_modules/react-native/Libraries/Text/RCTTextField.h
index c809f10..2d80af4 100644
--- a/node_modules/react-native/Libraries/Text/RCTTextField.h
+++ b/node_modules/react-native/Libraries/Text/RCTTextField.h
@@ -31,5 +31,6 @@
- (void)textFieldDidChange;
- (void)sendKeyValueForString:(NSString *)string;
- (BOOL)textFieldShouldEndEditing:(RCTTextField *)textField;
+- (void)handleDoneButtonFromInputAccessory;
@end
diff --git a/node_modules/react-native/Libraries/Text/RCTTextField.m b/node_modules/react-native/Libraries/Text/RCTTextField.m
index 32650d8..d4d8497 100644
--- a/node_modules/react-native/Libraries/Text/RCTTextField.m
+++ b/node_modules/react-native/Libraries/Text/RCTTextField.m
@@ -208,6 +208,12 @@ - (BOOL)textFieldShouldEndEditing:(RCTTextField *)textField
return YES;
}
+- (void)handleDoneButtonFromInputAccessory {
+ [self endEditing:YES];
+ [self textFieldSubmitEditing];
+}
+
+
- (void)observeValueForKeyPath:(NSString *)keyPath
ofObject:(RCTTextField *)textField
change:(NSDictionary *)change
diff --git a/node_modules/react-native/Libraries/Text/RCTTextFieldManager.m b/node_modules/react-native/Libraries/Text/RCTTextFieldManager.m
index 6b81a78..477484d 100644
--- a/node_modules/react-native/Libraries/Text/RCTTextFieldManager.m
+++ b/node_modules/react-native/Libraries/Text/RCTTextFieldManager.m
@@ -116,6 +116,23 @@ - (BOOL)textFieldShouldEndEditing:(RCTTextField *)textField
{
view.font = [RCTFont updateFont:view.font withFamily:json ?: defaultView.font.familyName];
}
+RCT_CUSTOM_VIEW_PROPERTY(showDoneButton, BOOL, RCTTextField)
+{
+ if (json && ([RCTConvert BOOL:json])) {
+ UIToolbar* toolbar = [[UIToolbar alloc] init];
+ [toolbar sizeToFit];
+ UIBarButtonItem* flex = [[UIBarButtonItem alloc]
+ initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
+ target:nil action:nil];
+ UIBarButtonItem* doneButton = [[UIBarButtonItem alloc]
+ initWithBarButtonSystemItem:UIBarButtonSystemItemDone
+ target:view action:@selector(handleDoneButtonFromInputAccessory)];
+ toolbar.items = @[flex, doneButton];
+ view.inputAccessoryView = toolbar;
+ } else {
+ view.inputAccessoryView = nil;
+ }
+}
RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
- (RCTViewManagerUIBlock)uiBlockToAmendWithShadowView:(RCTShadowView *)shadowView
@SudoPlz
Copy link

SudoPlz commented Jan 12, 2017

How do we apply this via command line?

Nevermind I leave this for others to find here.

Do:
curl https://gist.githubusercontent.com/chih/3aa8b3bbd490137a31f0b864eff1532e/raw/f1c683deeb5a8c98e32550c5b4ef4eacc61966a1/showDoneButton.patch | git apply

@SudoPlz
Copy link

SudoPlz commented Jan 12, 2017

But I can't get it to work!

@olimsaidov
Copy link

@SudoPlz, you need to re-run the project

@chih
Copy link
Author

chih commented Jan 23, 2017

I've updated the gist so that onSubmitEditing gets called with the DONE button is pressed

@renso3x
Copy link

renso3x commented May 2, 2017

Thank you for this one.

@rikur
Copy link

rikur commented May 3, 2017

Uh oh.. this worked flawlessly.. before react-native decided to completely revamp the files in question..

@rikur
Copy link

rikur commented May 3, 2017

@chih you wouldn't have a new version of this available?

@luco
Copy link

luco commented Jun 25, 2017

Why this isn't PR yet?

@jnrepo
Copy link

jnrepo commented Jun 27, 2017

noticing that onSubmitEditing doesn't trigger

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment