conditional fontFamily switches once but doesn't switch back on TextInput

[tareqdayya]

Hi,
I'm trying to conditionally control the fontFamily of a TextInput component based on the length of text entered inside it. When text has zero length, i would like to use one font family, and when it has length, i want to use another. This is to style the placeholder text differently from the inputted text.

When the TextInput first renders, it renders correctly, and once i start typing inside it, it successfully switches from one font family to another. However, if i delete what i wrote, it doesn't switch back the font family.

React Native version:
System:
OS: macOS 10.15.2
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Memory: 719.39 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.12.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.13.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
Build Tools: 25.0.2, 26.0.2, 28.0.3
System Images: android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Xcode: 11.3/11C29 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

1. create a controlled TextInput component
2. give it the following style prop:
   {fontFamily: YOUR_INPUT_VALUE ? 'ONE_FONT_FAMILY' : 'ANOTHER_FONT_FAMILY'}
3. type something in the component. It should switch the font family.
4. delete what you typed, it won't switch, and you will be stuck with the last font family for your placeholder.

Describe what you expected to happen:
For the font family to switch back to initial value after emptying the component.

code example:

class Input extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    };
    this.handleTextChange = this.handleTextChange.bind(this);
  }

  handleTextChange(text) {
    this.setState({text});
  }

  render() {
    const {text} = this.state;

    return (
      <TextInput
        style={{fontFamily: text ? 'Poppins-Bold' : 'Poppins-Light'}}
        onChangeText={this.handleTextChange}
        placeholder="Enter Email"
        value={text}
      />
    );
  }
}

Haven't tested on iOS. This is a problem i'm having on Android.

[safaiyeh]

Your style logic looks incorrect.

text ? 'Poppins-Bold' : 'Poppins-Light'

an empty string will resolve to true.

Try:
(text.length === 0) ? 'Poppins-Bold' : 'Poppins-Light'

[tareqdayya]

@safaiyeh my logic is correct. An empty string will not resolve to true.

Feel free to play with the logic anyway you want; i already have, it's not going to get it to work.

[tareqdayya]

UPDATE: problem also appears to be affecting fontWeight.
try it with a TextInput. Add the following to the style prop:
fontWeight: !!YOUR_TEXT ? 'bold' : 'normal',

I've tested it with fontSize today and it doesn't seem to affect size; although the response is less than ideal in case the fontSize changes aggressively.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[tareqdayya]

problem still exists.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.