React-native: TextInput with keyboardType="numeric" triggers custom keyboard on iOS

[viktorlarsson]

Environment

React Native Environment Info:
System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
Memory: 62.70 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.4 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz => 0.57.1
npmGlobalPackages:
react-native-git-upgrade: 0.2.7

Description

If the user has a custom keyboard (using bitmoji in this example but it happends with others as well) and the TextInput has keyboardType="numeric" it shows that specific custom keyboard and the user cannot switch keyboards, probably because it actually thinks it is a numeric keyboard. Using phone-pad works correctly and is the workaround that we are using now.

I'm currently on iOS 12, haven't tested earlier versions. Happends in iOS 12.1

Reproducible Demo

I've added a simple repo which has a normal TextInput and a numeric keyboard.
https://github.com/viktorlarsson/react-native-keyboard-bug

Here is a Snack Expo link:
https://snack.expo.io/BkCdz_BCm

[luissmg]

I am using an iPhone X simulator with 12.1 version too and this bug does not happen for me.
My versions of React and RN:

react: 16.6.1
react-native: 0.57.5

[viktorlarsson]

@luissmg Do you have a custom keyboard (bitmoji for example) installed on the simulator?

Don’t think that is possible. You need to run it on a device.

[luissmg]

@viktorlarsson You are right. Sadly I can't test it because I have no device to test on. Sorry

[viktorlarsson]

@luissmg Thanks for helping out anyways! :)

[tgensol]

It also happens to me and my users. When I want to use a numeric keyboard, for example a phone's input, the bitmoji keyboard is displayed instead of the numeric one

[alminde]

I’m getting it too. This does not seem related to React Native. Happens also in pure iOS. (Tested with number pad keyboard type text field in storyboard in newly-created project.)

[IgorVanian]

There is a bug in iOS itself that causes this issue and it's currently impossible to switch from custom keyboard: https://forums.developer.apple.com/thread/92030#316507

[tgensol]

It appears that there is a solution in the Apple Thread :

For anyone still searching on this particular issue: for iPhone (X, Xr, Xs), needsInputModeSwitchKey reports 'true' in viewDidLoad, then becomes 'false' in viewWillAppear. This still seems like a bug to me, but I am not sure at what point variables are guaranteed to be initialized.

How can we apply it to React Native ?

[nicolashemonic]

Same bug here on iPhone 7 Plus.
Until it's fixed I use keyboardType="phone-pad" that don't have the bug.

[tgensol]

Still having the issue. Custom keyboard is triggered with number-pad, but not with phone-pad

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.