-
Notifications
You must be signed in to change notification settings - Fork 24.4k
Commit
<TextInput keyboardType="numeric" returnKeyType="done" />
o…
…n iOS Summary: Standard only-numeric (number pad) keyboard on iOS does not have any "Done" or "Enter" button, and this is often very badly hurt user experience. Usually it can be solved by implementing custom `inputAccessoryView`, but RN does not have built-in support for customizing it. So, this commit introduced limited support only for "Done" button (returnKeyType="done") and it should suite very well for the vast majority of use cases. This is highly requested feature, see more details here: #1190 Reviewed By: mmmulani Differential Revision: D5268020 fbshipit-source-id: 90bd5bffac6aaa1fb7c5c2ac539b35b04d45918f
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -155,4 +155,64 @@ - (void)didMoveToWindow | |
[self.backedTextInputView reactFocusIfNeeded]; | ||
} | ||
|
||
#pragma mark - Custom Input Accessory View | ||
|
||
- (void)didSetProps:(NSArray<NSString *> *)changedProps | ||
{ | ||
[self invalidateInputAccessoryView]; | ||
} | ||
|
||
- (void)invalidateInputAccessoryView | ||
{ | ||
#if !TARGET_OS_TV | ||
UIView<RCTBackedTextInputViewProtocol> *textInputView = self.backedTextInputView; | ||
UIKeyboardType keyboardType = textInputView.keyboardType; | ||
|
||
// These keyboard types (all are number pads) don't have a "Done" button by default, | ||
// so we create an `inputAccessoryView` with this button for them. | ||
BOOL shouldHaveInputAccesoryView = | ||
( | ||
keyboardType == UIKeyboardTypeNumberPad || | ||
keyboardType == UIKeyboardTypePhonePad || | ||
keyboardType == UIKeyboardTypeDecimalPad || | ||
keyboardType == UIKeyboardTypeASCIICapableNumberPad | ||
) && | ||
textInputView.returnKeyType == UIReturnKeyDone; | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong.
shergin
Author
Contributor
|
||
|
||
BOOL hasInputAccesoryView = textInputView.inputAccessoryView != nil; | ||
|
||
if (hasInputAccesoryView == shouldHaveInputAccesoryView) { | ||
return; | ||
} | ||
|
||
if (shouldHaveInputAccesoryView) { | ||
UIToolbar *toolbarView = [[UIToolbar alloc] init]; | ||
[toolbarView sizeToFit]; | ||
UIBarButtonItem *flexibleSpace = | ||
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace | ||
target:nil | ||
action:nil]; | ||
UIBarButtonItem *doneButton = | ||
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone | ||
target:self | ||
action:@selector(handleInputAccessoryDoneButton)]; | ||
toolbarView.items = @[flexibleSpace, doneButton]; | ||
textInputView.inputAccessoryView = toolbarView; | ||
} | ||
else { | ||
textInputView.inputAccessoryView = nil; | ||
} | ||
|
||
// We have to call `reloadInputViews` for focused text inputs to update an accessory view. | ||
if (textInputView.isFirstResponder) { | ||
[textInputView reloadInputViews]; | ||
} | ||
#endif | ||
} | ||
|
||
- (void)handleInputAccessoryDoneButton | ||
{ | ||
[self.backedTextInputView endEditing:YES]; | ||
} | ||
|
||
@end |
8 comments
on commit 2b1795c
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice to add this new feature in the official documentation.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will this work on react-native version 0.45.1? I don't have the referenced files in my node_modules/react-native folder.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very well! Thanks!!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This commit brought a problem when use a custom ToolBar, like IQKeyboardManager.
Is there any way to disable this feature?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@douglasjunior Can you change returnKeyType
for your <TextInput>
s?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@douglasjunior Oh, I see what you mean. RN uses self.textInputAccessoryView == nil
as a flag to know should we rebuild/reset textInputAccessoryView
or not, but that library also modifies this.
Technically, it can be fixed by having additional variable which will store the fact that textInputAccessoryView
was constructed by RN.
I would love to see PR. 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@shergin thanks. I'll try it.
But I think that if a textInputAccessoryView
already exists, the RN should not replace it. What do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Created #16071
should this support go, next, search and send too?