diff --git a/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm index f5d280a59e9..e9e59a9235a 100644 --- a/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm +++ b/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm @@ -435,6 +435,14 @@ using namespace facebook::react; - (void)setDefaultInputAccessoryView { + // InputAccessoryView component sets the inputAccessoryView when inputAccessoryViewID exists + if (_backedTextInputView.inputAccessoryViewID) { + if (_backedTextInputView.isFirstResponder) { + [_backedTextInputView reloadInputViews]; + } + return; + } + UIKeyboardType keyboardType = _backedTextInputView.keyboardType; // These keyboard types (all are number pads) don't have a "Done" button by default, diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js index 218ad62d9f4..5a31407a030 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js @@ -23,6 +23,7 @@ const { Switch, Alert, } = require('react-native'); +import type {KeyboardType} from 'react-native/Libraries/Components/TextInput/TextInput'; const TextInputSharedExamples = require('./TextInputSharedExamples.js'); @@ -41,7 +42,10 @@ class WithLabel extends React.Component<$FlowFixMeProps> { } } -class TextInputAccessoryViewExample extends React.Component<{...}, *> { +class TextInputAccessoryViewChangeTextExample extends React.Component< + {...}, + *, +> { constructor(props) { super(props); this.state = {text: 'Placeholder Text'}; @@ -51,6 +55,7 @@ class TextInputAccessoryViewExample extends React.Component<{...}, *> { const inputAccessoryViewID = 'inputAccessoryView1'; return ( + Set InputAccessoryView with ID & reset text: { } } +class TextInputAccessoryViewChangeKeyboardExample extends React.Component< + {...}, + *, +> { + constructor(props) { + super(props); + this.state = {text: '', keyboardType: 'default'}; + } + + _switchKeyboard = () => { + this.setState({ + keyboardType: + this.state.keyboardType === 'default' ? 'number-pad' : 'default', + }); + }; + + render() { + const inputAccessoryViewID = 'inputAccessoryView2'; + return ( + + Set InputAccessoryView with ID & switch keyboard: + this.setState({text})} + value={this.state.text} + keyboardType={this.state.keyboardType} + returnKeyType="done" + /> + + +