Setting state on controlled TextInput duplicates its value

[DanielRamosAcosta]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

OS: Windows 10
Node: 10.6.0
Yarn: Not Found
npm: 6.1.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.1.0.0 AI-173.4819257

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ~0.55.2 => 0.55.4

Description

I have created an app from scratch using create-react-native-app, and I have modified App.js to include the following:

import React from 'react';
import { StyleSheet, View, TextInput } from 'react-native';

export default class App extends React.Component {
  constructor () {
    super()
    this.state = {text: ''}
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          value={this.state.text}
          onChangeText={text => this.setState({text: text.toUpperCase()})}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 100
  },
});

Reproducible Demo

This is the example I'm using: https://snack.expo.io/HyVKGuVNQ

Here is a video I've recorded: https://www.youtube.com/watch?v=TyXIc2euVCs

It seems that it's only reproducible in Android

And here is the same video as GIF:

Why I haven't used [email protected]

Installing [email protected] and [email protected] leads to an strange error when executing npm start:

10:29:15: Failed building JavaScript bundle
10:29:16: You are now debugging remotely; check your browser console for your application logs.
10:29:16: (node:18920) UnhandledPromiseRejectionWarning: Error: Plugin/Preset files are not allowed to export objects, only functions. In E:\Documentos\Trabajo\LeanMind\my-appaaa\node_modules\babel-preset-expo\index.js
10:29:16:     at createDescriptor (E:\Documentos\Trabajo\LeanMind\my-appaaa\node_modules\@babel\core\lib\config\config-descriptors.js:162:11)
10:29:16:     at items.map (E:\Documentos\Trabajo\LeanMind\my-appaaa\node_modules\@babel\core\lib\config\config-descriptors.js:87:50)
10:29:16:     at Array.map (<anonymous>)
10:29:16:     at createDescriptors (E:\Documentos\Trabajo\LeanMind\my-appaaa\node_modules\@babel\core\lib\config\config-descriptors.js:87:29)
10:29:16:     at createPresetDescriptors (E:\Documentos\Trabajo\LeanMind\my-appaaa\node_modules\@babel\core\lib\config\config-descriptors.js:79:10)
10:29:16:     at presets (E:\Documentos\Trabajo\LeanMind\my-appaaa\node_modules\@babel\core\lib\config\config-descriptors.js:61:19)
10:29:16:     at presets (E:\Documentos\Trabajo\LeanMind\my-appaaa\node_modules\@babel\core\lib\config\config-descriptors.js:51:25)
10:29:16:     at mergeChainOpts (E:\Documentos\Trabajo\LeanMind\my-appaaa\node_modules\@babel\core\lib\config\config-chain.js:308:26)
10:29:16:     at E:\Documentos\Trabajo\LeanMind\my-appaaa\node_modules\@babel\core\lib\config\config-chain.js:271:7
10:29:16: (node:18920) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)

---

Issues that might be related:

• textInput value proper is invalid #20341
• TextInput onChangeText prop isn't working as expected #19495
• TextInput value can't be change during onChangeText [iOS] #18874
• Android: Controlled TextInput Issue on Some Androids #19085

/cc @adrian-afergon

[hramos]

Can you reproduce this on 0.56? You can try using react-native init instead to create a new project using 0.56.

[DanielRamosAcosta]

@hramos The Error: Unable to resolve module AccessibilityInfo (reported at #14209) is blocking me 😢

[leo-tavares]

Hello @DanielRamosAcosta !

I've been through this same problem, The only solution I found was ... use the property autoCapitalize = {'characters'}.

I believe this is not the ideal solution, but it helps to "remedy" the problem.

[Noitidart]

I confirm I think this is related to - #19085

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[Noitidart]

It happens on the latest release as well.

[iagormoraes]

The problem of this is related to set uppercase the state string, maybe this can help the dev team of facebook to track the issue on native side.