[ TextInput ][ Android ] style/fontFamily not updated on component re-render

[Fsarmento]

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 8.4.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz => 0.48.4

Target Platform: Android (7.0.0)

Steps to Reproduce

Note: The issue only applies to Android. On iOS it has the expected behavior.

Consider the component above. When the component has no text, the placeholder should be visible with fontFamily bariol-regular. When the user starts typing, the inserted text should have fontFamily bariol-bold. When the user erases all the content of the TextInput, the placeholder should appear again with fontFamily: 'bariol-regular'.

const Input = ({ value, onChangeText, placeholder }) => {
  const fontFamily = value === '' ? { fontFamily: 'bariol-regular' } : { fontFamily: 'bariol-bold' };
  return (
      <TextInput
        placeholder={placeholder}
        placeholderTextColor={'#fff'}
        autoCorrect={false}
        style={[styles.inputStyle, fontFamily]}
        value={value}
        onChangeText={onChangeText}
        underlineColorAndroid={'transparent'}
      />
  );
};

Expected Behavior

1. textInput is mounted: placeholder is visible with fontFamily: 'bariol-regular'
2. user types some text: the new text is visible with fontFamily: 'bariol-bold'
3. user deletes all the text: the placeholder is visible again with fontFamily: 'bariol-regular'

Actual Behavior

1. textInput is mounted: as expected
2. user types some text: as expected
3. user deletes all the text: the placeholder is visible again with fontFamily: 'bariol-bold'

On step 3 the fontFamily is not updated.

Reproducible Demo

https://snack.expo.io/@fsarmento/inputtext-style-bug-report

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[Fsarmento]

Still happening in the latest version of react-native

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

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3

[andrewzey]

This is still happening

[Fsarmento]

Still not fixed in 0.57.8 (#22644)

[WilliamIPark]

I'm getting this issue I believe. The font will be applied to the placeholder, but not the text that the user inputs.

"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",