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

14,832

Solution 1

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

Solution 2

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"
/>

Solution 3

its working for me keyboardType='numeric'

Share:
14,832

Related videos on Youtube

vasavi
Author by

vasavi

Updated on September 14, 2022

Comments

  • vasavi
    vasavi over 1 year

    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 ,)

    • C.P.
      C.P. over 8 years
      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.
  • Sulthan
    Sulthan about 6 years
    Uh, why should placeholder affect the keyboard in any way?
  • MarcoS
    MarcoS about 6 years
    I just suppose a string value could change the type of the TextInput...
  • Devansh sadhotra
    Devansh sadhotra over 4 years
    it doesn't show 'next' key in ios when key board type is numeric or phone-pad
  • Charly
    Charly over 4 years
    on ios you have to use 'done' returnKeyType: Platform.OS === 'ios' ? 'done' : 'next',