[Android] Value resets when re-rendering styles

[akuul]

Describe the bug
If I have dynamic styling, the MaskedTextInput resets itself. This doesn't seem to happen with a normal React Native TextInput. This can be testable side-by-side having both.

I have applied changes from 1.2.3 on getExportedCustomDirectEventTypeConstants, due to a Android build error. However, I have used 1.2.3 and I had the same results.

Code snippet

<...>
const [amount, setAmount] = useState('')

const amountExceeded = Number(amount) > 500

 <MaskedTextInput
              mask="[$99990].[09]"
              value={amount}
              keyboardType="numeric"
              allowedKeys="0123456789,."
              onChangeText={(val) => setAmount(val)}
              placeholder="0"
              customNotations={CUSTOM_NOTATION}
              placeholderTextColor={theme.color.blueJasmine}
              style={[styles.amount, amountExceeded && styles.amountExceeded]}
            />
            <TextInput
              value={amount}
              keyboardType="numeric"
              onChangeText={(val) => setAmount(val)}
              placeholder="1"
              placeholderTextColor={theme.color.blueJasmine}
              style={[styles.amount, amountExceeded && styles.amountExceeded]}
            />

const styles = StyleSheet.create({
  amount: { color: 'black' },
  amountExceeded: { color: 'blue' },
});

To Reproduce
Steps to reproduce the behavior:
Copy the snippet.

Change value of React Native TextInput to 600, you will see text of input become blue for both inputs.
Change value of MaskedTextInput and you will see the text of input becoming orange briefly and then resetting back to empty.

Expected behavior
Dynamically applying styles should not reset the MaskedTextInput. Removing amountExceeded && styles.amountExceeded works fine.

Smartphone (please complete the following information):

• Desktop OS: macOS
• Device: Pixel 7 Pro
• OS: Android 14
• RN version: 0.71.17
• RN architecture: Old
• JS engine: Hermes
• Library version: 1.3.5

[IvanIhnatsiuk]

@akuul thanks, I'll have a look later today 🙂 .

[IvanIhnatsiuk]

Hmm, this seems to be a problem with react-native itself. When I change the color style, it resets text input value state on the native side.

So, this problem should be solved by react-native itself, however they don't merge any PRs for the old arch. I will provide a fix for controlled text inputs for the old arch.

import React, { useState } from "react";
import { ScrollView, StyleSheet, TextInput } from "react-native";

import Button from "../../components/Button";

const styles = StyleSheet.create({
  amount: {
    borderColor: "black",
    borderWidth: 1,
    color: "black",
  },
  amountExceeded: {
    borderColor: "blue",
    borderWidth: 1,
    color: "red",
  },
});

const Main = () => {
  const [style, setStyle] = useState(styles.amount);

  return (
    <ScrollView>
      <Button
        title="change color"
        onPress={() => {
          setStyle((prev) =>
            prev === styles.amount ? styles.amountExceeded : styles.amount,
          );
        }}
      />
      <TextInput keyboardType="numeric" placeholder="1" style={style} />
    </ScrollView>
  );
};

export default Main;

Screen.Recording.2025-04-01.at.15.46.17.mov

[IvanIhnatsiuk]

@akuul As a temporary solution, you can add a patch with the following changes to package/src/native/views/MaskedTextInput/index.tsx.

Just pass the prop value to the InputComponent:

   <>
        <InputComponent {...rest} ref={ref} value={value} autoCapitalize={autoCapitalize} />
        <MaskedTextInputDecoratorView
          affinityCalculationStrategy={affinityCalculationStrategy}
          affinityFormat={affinityFormat}
          allowedKeys={allowedKeys}
          allowSuggestions={allowSuggestions}
          autocomplete={autocomplete}
          autocompleteOnFocus={autocompleteOnFocus}
          autoSkip={autoSkip}
          customNotations={customNotations}
          customTransformation={customTransformation}
          defaultValue={defaultValue}
          isRTL={isRTL}
          primaryMaskFormat={mask}
          style={IS_FABRIC ? styles.farAway : styles.displayNone}
          validationRegex={validationRegex}
          value={value}
          onAdvancedMaskTextChange={onAdvancedMaskTextChangeCallback}
        />
  </>

[akuul]

Yes, I patched it like this already, just had to use onChangeText prop too, because there were some strange stuttering, but works fine now.

I did notice that it happens with uncontrolled TextInput from React Native too, but seems to work fine when you make it controlled - however it wasn't the case with MaskedTextInput thus raised an issue.

Thank you for your input, I will use the patch for the time being.

[IvanIhnatsiuk]

RN issue: facebook/react-native#43403

Possible fix: facebook/react-native#45991

[litinskii]

catch the same when you change "placeholder",

if placeholder depend on value placeholder={someConditionalValue ? 'placeholderText' : undefined}

then onAdvancedMaskTextChangeCallback call additional time

but if I change MaskedTextInput to regular TextInput it work fine