diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts b/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts index 2c0c099a894fca..fa196a19491df0 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts @@ -738,6 +738,11 @@ export interface TextInputProps | ((e: NativeSyntheticEvent) => void) | undefined; + /** + * Called when a single tap gesture is detected. + */ + onPress?: ((e: NativeSyntheticEvent) => void) | undefined; + /** * Callback that is called when a touch is engaged. */ diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js index 9adbfe9f6f190b..39ba481b7e4751 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.flow.js @@ -766,6 +766,11 @@ export type Props = $ReadOnly<{| */ unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed, + /** + * Called when a single tap gesture is detected. + */ + onPress?: ?(event: PressEvent) => mixed, + /** * Called when a touch is engaged. */ diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js index 481938f08434a5..2dddd7ae6bff38 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.js +++ b/packages/react-native/Libraries/Components/TextInput/TextInput.js @@ -808,6 +808,11 @@ export type Props = $ReadOnly<{| */ unstable_onKeyPressSync?: ?(e: KeyPressEvent) => mixed, + /** + * Called when a single tap gesture is detected. + */ + onPress?: ?(event: PressEvent) => mixed, + /** * Called when a touch is engaged. */ @@ -1378,27 +1383,37 @@ function InternalTextInput(props: Props): React.Node { const accessible = props.accessible !== false; const focusable = props.focusable !== false; + const { + editable, + hitSlop, + onPress, + onPressIn, + onPressOut, + rejectResponderTermination, + } = props; + const config = React.useMemo( () => ({ - hitSlop: props.hitSlop, + hitSlop, onPress: (event: PressEvent) => { - if (props.editable !== false) { + onPress?.(event); + if (editable !== false) { if (inputRef.current != null) { inputRef.current.focus(); } } }, - onPressIn: props.onPressIn, - onPressOut: props.onPressOut, - cancelable: - Platform.OS === 'ios' ? !props.rejectResponderTermination : null, + onPressIn: onPressIn, + onPressOut: onPressOut, + cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null, }), [ - props.editable, - props.hitSlop, - props.onPressIn, - props.onPressOut, - props.rejectResponderTermination, + editable, + hitSlop, + onPress, + onPressIn, + onPressOut, + rejectResponderTermination, ], );