Skip to content

Instantly share code, notes, and snippets.

@chih
Last active January 12, 2021 16:36
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • 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
@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