React-native: Can't see decimal key when keyboardType="numeric" on my HTC device

[RituKhetan]

Is this a bug report?
YES

Environment
Environment:
OS: Windows 8
Node: v9.3.0

npm: 4
Using EXPO app for testing
Packages: (wanted => installed)
"expo": "^23.0.4",
"react": "16.0.0",
"react-native": "0.50.3"

Target Platform: Android (4.4.2)

Steps to Reproduce
(Write your steps here:)

Install create-react-native-app (Run command: npm install -g create-react-native-app
Create a react-native-app (Go to a directory and run command: create-react-native-app tipcalc
Make changes in the App.js file: https://gist.github.com/RituKhetan/2306e5bed13f78cb5602dc9c1c21c90d
Expected Behavior
Should show numeric keypad with decimal key on my HTC device

Actual Behavior
Cannot see the decimal key on my HTC device when I try to type into the TextInput component.

[RituKhetan]

Can someone please help?

[aemdy]

Same here as well on at least Samsung Galaxy A3.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[xerotolerant]

This problem still persits on Samsung devices.

[JaEdmuva]

I have the same issue with a HTC One and RN 0.54.2, anybody has a clean and safe solution?

[elly0t]

any update on this?

[duyphambhtech]

It has the same issue for my s8+ but not for my s5 and s7 edge, please reopen

[csumrell]

This is still a problem for a lot of my users

[aenciso]

Also having issues on LG G5, G6, V30.

Related issue:

https://github.com/facebook/react-native/issues/12988

Potential solution is to add autoCapitalize="none" to TextInput. I know it's not ideal but at least it shows decimal point on the keyboard.

[scriptgb]

When user uses Samsung Keyboard the issue, still persists. Anyone find a solution to that?

[scriptgb]

@JPanneel I'm using react-native 0.48.4, I tried to change the files manually but the behaviour stills the same. So, I need to upgrade the react-native version or there is something else that I can do to make this works.

[yanhaijing]

Samsung s8 has the same issue

[amcsi]

I'm getting the same issue on Samsung Galaxy S7. My girlfriend as well on her Xiaomi Redmi Plus 3.

    "expo": "^26.0.0",
    "react": "^16.3.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz",

[kajal-mittal]

I found,Decimal-Key is not showing on devices having version less than 5.0.0 if we give keyboardType numeric.So,we check SystemVersion.If systemVersion <= '5.0.0' then we can open phone-pad keyboard ,otherwise open numeric keypad.

<TextInput
style={ { color: Colors.DEFAULT_TEXT_COLOR,
 ...Fonts.boldFont(66), flex: 0.8 }]}       
underlineColorAndroid="transparent"             
keyboardType={Platform.OS === 'android' ? (systemVersion <= '5.0.0' ? 'phone-pad' : 'numeric') : 'numeric'}
}}
/>

[Silva-Amon]

Also having issues on LG G5, G6, V30.

Related issue:

12988

Potential solution is to add autoCapitalize="none" to TextInput. I know it's not ideal but at least it shows decimal point on the keyboard.

It worked to me. Thank you!

[wsun]

I used keyboardType="decimal-pad" (#19714), but on LG devices running various Android versions (e.g. VS501, VS996, with Android 7 and 8) the decimal would not show on the keyboard.

My TextInput didn't have autoCapitalize set to anything (it's a numeric use case, why would it?), but specifying autoCapitalize="none" fixed this issue for me as well, as suggested by others earlier.

broken behavior, on VS501: https://i.imgur.com/5jZux4b.png
fixed behavior: https://i.imgur.com/G9w0SDD.png

[yuvalkro]

Had the same issue.
Galaxy S8 showing decimal, Galaxy TAB S3 - not showing decimal.

I have found that if I remove the editable property it's showing the decimal.