question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:5

github_iconTop GitHub Comments

5reactions
react-native-botcommented, Feb 24, 2018

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 ContributeWhat to Expect from Maintainers

3reactions
Fsarmentocommented, Feb 26, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native Android TextInput placeholder style not ...
I am trying to update the placeholder style of the TextInput component but on android its not completely updating the style.
Read more >
Working with Text - Crank Software
Storyboard gives you the ability to create and control text content with the text render extension. This render extension offers a single...
Read more >
Request: Do not remove clipboard permission and do not let ...
When I eagerly updated to Android 10 on my Pixel 3, I had no idea that clipboard access was to be suddenly taken...
Read more >
How change font-family (font-family.ttf from assets) of react ...
i.e.. injecting following code into web view which will change body tag fontFamily const INJECTED_JAVASCRIPT = `(function() { let body = document.
Read more >
ZIM Docs - Text Version - ZIMjs
This allows you to show content for non-canvas browsers. The content may also be indexed ... NOTE: All the ZIM shapes and components...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found