feat: Add inputMode prop to TextInput component

[gabrieldonadel]

Summary

This adds the inputMode prop to the TextInput component as requested on https://github.com/facebook/react-native/issues/34424, mapping web inputMode types to equivalent keyboardType values. This PR also updates RNTester TextInputExample in order to facilitate the manual QA.

Caveats

~~This only adds support to text, decimal, numeric, tel, search, email, and url types.~~

inputMode="none"

Currently mapped to default keyboard type.

The main problem with this input mode is that it's not supported natively neither on Android or iOS. Android TextView does accept none as android:inputType but that makes the text not editable, which wouldn't really solve our problem. UITextInput on iOS on the other hand doesn't even have something similar to avoid displaying the virtual keyboard.

If we really want to add the support for inputMode="none" one interesting approach we could take is to do something similar to what WebKit has done (https://github.com/WebKit/WebKit/commit/3b5f0c8ecf9de23f79524ed02e290837ab8334cd). In order to achieve this behavior, they had to return a UIView with a bounds of CGRectZero as the inputView of the WKContentView when inputmode=none is present. ~~I guess the real question here should be, do we really want to add this? Or perhaps should we just map inputMode="none" to keyboardType="default"~~

Android docs: https://developer.android.com/reference/android/widget/TextView#attr_android:inputType iOS docs: https://developer.apple.com/documentation/uikit/uikeyboardtype?language=objc

inputMode="search" on Android

Currently mapped to default keyboard type.

Android TextView does not offers any options like UIKeyboardTypeWebSearch on iOS to be used as search with android:inputType and that's probably the reason why keyboardType="web-search" is iOS only. I checked how this is handled on the browser on my Android device and it seems that Chrome just uses the default keyboard, maybe we should do the same?

Open questions

• ~~What should be done about inputMode="none"?~~ Add it and map it to default keyboard type.
• ~~Which keyboard should we show on Android when inputMode="search"?~~ Use the default keyboard the same way Chrome does

Changelog

[General] [Added] - Add inputMode prop to TextInput component

Test Plan

1. Open the RNTester app and navigate to the TextInput page
2. Test the TextInput component through the Input modes section

https://user-images.githubusercontent.com/11707729/185691224-3042e828-a008-4bd0-bb3d-010a6a18dfd5.mov

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,618,315	+445
android	hermes	armeabi-v7a	7,032,564	+440
android	hermes	x86	7,918,371	+441
android	hermes	x86_64	7,891,987	+436
android	jsc	arm64-v8a	9,495,611	+161
android	jsc	armeabi-v7a	8,273,233	+170
android	jsc	x86	9,433,404	+174
android	jsc	x86_64	10,026,379	+161

Base commit: 8c882b4f3d361be715c8ec2793c545c687711b5e Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 8c882b4f3d361be715c8ec2793c545c687711b5e Branch: main

[facebook-github-bot]

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[necolas]

'none' => 'default' (or noop) sounds right.

[yungsters]

Which keyboard should we show on Android when inputMode="search"?

Doing the same thing as Chrome seems reasonable. So inputMode="search" should display the default keyboard.

[facebook-github-bot]

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[gabrieldonadel]

@cipolleschi I've just rebased this now that CI has been fixed

[facebook-github-bot]

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[gabrieldonadel]

@necolas @cipolleschi any thoughts on why this didn't get labeled as merged?

[necolas]

Apparently inputMode=none could be mapped to showSoftInputOnFocus

See https://github.com/necolas/react-native-web/issues/2421

[gabrieldonadel]

Apparently inputMode=none could be mapped to showSoftInputOnFocus

See necolas/react-native-web#2421

Sounds good to me, gonna open a follow-up PR updating this

[gabrieldonadel]

Apparently inputMode=none could be mapped to showSoftInputOnFocus See necolas/react-native-web#2421

Sounds good to me, gonna open a follow-up PR updating this

Here it goes @necolas https://github.com/facebook/react-native/pull/35228