<TextInput keyboardType="numeric"/> is not working in react native

Question

Here is my instance

var LoginPopup=React.createClass({
   render:function(){
            return(
               <View>
                   <TextInput placeholder="number" keyboardType="numeric"/>
 <TextInput placeholder="url" keyboardType="url"/>

               </View>
            )

  }
})

In this component any type of keyboardType is not working(like number,url, email-address,number-pad,phone-pad etc ,)

What do you mean by not working? Is the component not visible? Or the keyboard is not numeric? — Chirag Shah
– Chirag Shah, Commented Aug 25, 2015 at 11:06
I am facing same problem in android. @Chirag - I think 'vasavi' is referring to a problem that - keyboardType="numeric" opens up the keyboard which has characters too. Ideally it should open a keyboard with numbers only. We have such keyboard in android. — C.P.
– C.P., Commented Dec 26, 2015 at 6:41
@C.P. No, Android doesn't have a keyboard like that. Android doesn't have a keyboard at all. The keyboard is a separate app that's different for each model of phone (or can be replaced by the user), and depending on the model of phone it may or may not have a numeric only screen. There's no requirement for it. Nor is there a requirement that a given keyboard app honor the inputType being set to numeric. — Gabe Sechan
– Gabe Sechan, Commented Sep 4, 2023 at 2:03

gowthami · Accepted Answer · 2018-05-30 07:46:04Z

9

<TextInput value={this.state.mobileNumber}
     returnKeyType={'next'}
     keyboardType={'phone-pad'}
     onChangeText={(mobileNumber) => this.setState({mobileNumber})}
                                       style={[styles.input]}                                      
  />

answered May 30, 2018 at 7:46

gowthami

1812 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Devansh sadhotra Over a year ago

it doesn't show 'next' key in ios when key board type is numeric or phone-pad

Charly Over a year ago

on ios you have to use 'done' returnKeyType: Platform.OS === 'ios' ? 'done' : 'next',

Ali H. Kudeir Over a year ago

it doesn't show the dot, comma in android

ankushlokhande · Accepted Answer · 2023-09-04 07:26:48Z

4

keyboardType="numeric" does work for me on react-native 0.46.3 on both Android and iOS.
Are you sure using an alphabetical placeholder ("number") is not the cause of the issue?

This is my relevant code:

<TextInput
    editable={!this.state.user.logged}
    onChangeText={(mobileNumber) => this.setState({mobileNumber})}
    placeholder={I18n.t('MobileNumber')}
    ref='mobileNumber'
    returnKeyType={(Platform.OS === 'ios') ? 'done' : 'next'}
    placeholder={I18n.t('MobileNumber')}
    style={styles.inputText}
    underlineColorAndroid='rgba(0,0,0,0)'
    value={this.state.mobileNumber}
    keyboardType="numeric"
/>

edited Sep 4, 2023 at 7:26

ankushlokhande

2,02813 silver badges35 bronze badges

answered Jan 9, 2018 at 15:34

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

2 Comments

Sulthan Over a year ago

Uh, why should placeholder affect the keyboard in any way?

MarcoS Over a year ago

I just suppose a string value could change the type of the TextInput...

Faik SARI · Accepted Answer · 2020-04-04 08:51:39Z

2

its working for me keyboardType='numeric'

answered Apr 4, 2020 at 8:51

Faik SARI

211 bronze badge

Comments

Moustaoui Salaheddine · Accepted Answer · 2022-05-20 08:58:01Z

0

You need to add onChangeText for it to work

<TextInput placeholder="number" keyboardType="numeric" onChangeText={() => { }} />

answered May 20, 2022 at 8:58

Moustaoui Salaheddine

881 gold badge1 silver badge8 bronze badges

Comments

Ian Nathanael Hadinoto · Accepted Answer · 2023-09-04 01:50:55Z

0

You need to add the prop inputMode="numeric" and inputMode="url" as follows:

<TextInput placeholder="number" keyboardType="numeric" inputMode="numeric"/>
<TextInput placeholder="url" keyboardType="url" inputMode="url"/>

answered Sep 4, 2023 at 1:50

Ian Nathanael Hadinoto

917 bronze badges

Comments

dazs · Accepted Answer · 2018-01-09 19:03:18Z

-6

Maybe it will work:

keyboardType={"numeric"}

answered Jan 9, 2018 at 19:03

dazs

1421 silver badge3 bronze badges

Collectives™ on Stack Overflow

<TextInput keyboardType="numeric"/> is not working in react native

6 Answers 6

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related