TextInput not adhering to the passed in value prop

I updated an app (iOS only) I am working on from 0.49 to 0.54. In my app I am working with currency and enforce during the onChangeText event that what is entered is valid USD. If what the user entered is not the proper format I do not update the TextInput. This was working fine as far as I remember in 0.49 but after the update to 0.54 I can enter things like ‘FOO’ or 112.23242, neither of which would be a valid USD currency amount. It appears that the TextInput component is no longer setting it’s value to the value prop value.

Environment

Environment: OS: macOS High Sierra 10.13.3 Node: 8.9.4 Yarn: Not Found npm: 5.6.0 Watchman: 4.7.0 Xcode: Xcode 9.2 Build version 9C40b Android Studio: Not Found

Packages: (wanted => installed) react: 16.3.0-alpha.1 => 16.3.0-alpha.1 react-native: 0.54.0 => 0.54.0

Expected Behavior

As it is a controlled component, the TextInput value would match what is passed to the value prop.

Actual Behavior

I can set the value prop to something like “HARDCODED TEXT” and if I enter new text into the TextInput it gets displayed.

Steps to Reproduce

Some sample code loosely based on the TextInput example in the docs showing the issue:

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={{top:100, margin: 10}}>
        <Text>I would expect this to say Hello! when the user types and then never change</Text>
        <TextInput
          style={{height: 40, marginBottom: 10, borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({val: 'Hello!'})}
          placeholder="Should lock value to Hello! after first edit"
          value={this.state.val}
        />
        <Text>I would expect this to always say HARDCODED TEXT</Text>
        <TextInput
          style={{height: 40, marginBottom: 10, borderColor: 'gray', borderWidth: 1}}
          value="HARDCODED TEXT"
        />
        <Text>I would expect this to never have a value in it</Text>
        <TextInput
          style={{height: 40, marginBottom: 10, borderColor: 'gray', borderWidth: 1}}
          placeholder="value prop set to a non-existent state"
          value={this.state.foo}
        />
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

[rptwsthi]

@rptwsthi if you set it as undefined instead of -1, doesn’t it work for Android? Because if so, you don’t need the duplicated code.

undefined it is then thanks @reyalpsirc you have made my life easy. Coming from mainly swift background my hands are tight with javascript.

[reyalpsirc]

@rptwsthi if you set it as undefined instead of -1, doesn’t it work for Android? Because if so, you don’t need the duplicated code.