CODEWITHSUNDEEP
react-native
Nimila Hiranya
Nimila Hiranya

Reputation: 5192

Creating a Number Changer with TextInput in React Native

I'm trying create a Number Incrementor/Decrementor with the use of Text Input and 2 Touch Highlights "+" and "-".

<TextInput
  keyboardType='number-pad'
  value={this.state.textValue}
  onChangeText={this.updateText}
  style={styles.textInput}
/>

<TouchableHighlight
  style={styles.button}
  onPress={this.increment}>
    <Text style={styles.buttonTextFill}>+</Text>
</TouchableHighlight>

<TouchableHighlight
  style={styles.button}
  onPress={this.decrement}>
    <Text style={styles.buttonTextFill}>-</Text>
</TouchableHighlight>

And I use the following methods:

updateText: function (text) {
    this.setState({textValue: text});
},

decrement: function () {
    this.setState({textValue: this.state.textValue - 1});
},

increment: function () {
    this.setState({textValue: this.state.textValue + 1});
},

Also I have set textValue as a state in getInitialState function and set it to 0.

Why isn't this working, what am I doing wrong?

Upvotes: 1

Views: 2806

Answers (1)

rmevans9
rmevans9

Reputation: 5643

It would seem that TextInput is not a fan of the value being a number. I put a .toString() on the value of the TextInput and everything started working as expected. In addition you need to convert the string value to a number in the on change since TextInput passes a string when you change it.

The new Update method:

updateText: function (text) {
    this.setState({textValue: +text});
},

The new TextInput:

<TextInput
    keyboardType='number-pad'
    value={this.state.textValue.toString()}
    onChangeText={this.updateText}
    style={styles.textInput}
/>

https://rnplay.org/apps/ZNcwSg

Upvotes: 4

Related Questions