TextInput does not match update until it receives focus

[chrisglein]

@chrisglein Okay so I created two fresh inits, one for 0.63 and one for 0.64. I replaced the App.tsx content with the following:

const App = () => {
  const [quantity, setQuantity] = React.useState<number>(0);
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <TextInput value={quantity.toString()} />
        <Button
          title={'Count Up'}
          onPress={() => {
            setQuantity(quantity + 1);
          }}
        />
      </SafeAreaView>
    </>
  );
};

I additionally recorded 2 small video showcases (mp4) of the problem and added it to Google-Drive. You can watch it here:

• https://drive.google.com/file/d/1LRll1O-SYo8X8vj6QinKONegDNVdFAOt/view?usp=sharing
• https://drive.google.com/file/d/1ziNzS4bDwlwSFKP3ux1etNzGUXQkLs-s/view?usp=sharing

As you can see, the value shown by the textInput is not what it actually has registered as state. As soon as I type into the textInput it replaces the value with the correct one. After that, the count up button works.

This does definitely not align with iOS/Android/Web behaviour 🤷

Originally posted by @creambyemute in #4444 (comment)

[asklar]

I think this is the same issue that is causing microsoft/react-native-gallery#113 and possibly others; something is missing a re-render.

@creambyemute If you repro the issue and resize the window instead of typing in the textbox, does the textbox get updated to reflect the true value?

[asklar]

@chrisglein if this ends up being the same issue, and it affects more than just text in this case, we might want to consider bringing this in sooner since it's pretty broken