Android TextInput font family incorrect after switching secureTextEntry

[timomeara]

This appears to be an old issue, but i'm seeing it now in 0.63.3
it's not occurring in IOS

#6149, #5710

Description

When secureTextEntry={true} for TextInput, the font-family for placeholder is ignored:

React Native version:

System:
OS: macOS 10.15.4
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 596.29 MB / 32.00 GB
Shell: 5.8 - /usr/local/bin/zsh
Binaries:
Node: 12.18.3 - /usr/local/bin/node
Yarn: 1.17.3 - ~/.yarn/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /Users/timo/.rvm/rubies/ruby-2.4.1/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
Android SDK:
API Levels: 22, 23, 24, 25, 26, 27, 28, 29
Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.2, 28.0.3, 29.0.2
System Images: a...google_apis | Google APIs Intel x86 Atom Sys..., a...-23 | Intel x86 Atom, a... | Intel x86 Atom_64, a...google_apis | Google APIs Intel x86 Atom Sys..., a...gle_apis | Google APIs Intel x86 Atom_64 ..., a...google_apis | Google APIs Intel x86 Atom Sys..., a...google_apis | Google APIs Intel x86 Atom Sys..., a...s_playstore | Google Play Intel x86 Atom Sys..., a...google_apis | Google APIs Intel x86 Atom Sys..., a...gle_apis | Google APIs Intel x86 Atom_64 ..., a...s_playstore | Google Play Intel x86 Atom Sys...
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild
Languages:
Python: 3.8.5 - /usr/local/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

<TextInput
  id={'email'}
  placeholder={'Email'}
  secureTextEntry={false}
  style={{fontFamily: 'Helvetica', fontSize: 14, fontWeight: '400' }}
/>

<TextInput
  id={'password'}
  placeholder={'Password'}
  secureTextEntry={true}
  style={{fontFamily: 'Helvetica', fontSize: 14, fontWeight: '400' }}
/>

Expected Results

i expect the style rules to be applied

Snack, code example, screenshot, or link to a repository:

[chrislarson]

I'm also facing this issue after upgrading from 0.62.2 to 0.63.3

[emilsbee]

Having the same issue after upgrading, any progress resolving this?

[Harikasai999]

I'm also facing same issue in "react-native": "0.63.3".

[timomeara]

i'sorry to hear you'all are having the same issue, but glad to know i'm not crazy or doing something silly.

i ended up doing something like this:
https://stackoverflow.com/questions/2711858/is-it-possible-to-set-a-custom-font-for-entire-of-application/16883281#16883281

this overrides one of the system fonts so that when RN fails to render the font in the style, the system font it does render is actually the same font.
not a great solution but it fixed it for now

[hank121314]

Hi @timomeara .
I have made a pr to fix this issue!
Can you help me to test whether it works? Thanks!

[AndreasA]

I have the same issue regarding font family with placeholders. It also is an issue (for me) if I change secure text entry with onFocus and onBlur (and remove and add the placeholder text).
onBlur results in the wrong font again without some tricks regarding style property but I hope your PR fixes that too.

[emilsbee]

Unfortunately, the original problem still persists for me.

[hank121314]

Unfortunately, the original problem still persists for me.

Do you try with Building from source?

[AndreasA]

I mentioned this in the PR. I can't be 100% certain though but:

I am using expo SDK 39.0.2 and I also encounter the font family issue with password fields but from the code your fix should not help. Interestingly, in the emulator it works fine but once it is on a real device it fails to correctly style the placeholder.

in that version setInputType looks like this:

  @Override
  public void setInputType(int type) {
    Typeface tf = super.getTypeface();
    super.setInputType(type);
    mStagedInputType = type;
    // Input type password defaults to monospace font, so we need to re-apply the font
    super.setTypeface(tf);

    /**
     * If set forces multiline on input, because of a restriction on Android source that enables
     * multiline only for inputs of type Text and Multiline on method {@link
     * android.widget.TextView#isMultilineInputType(int)}} Source: {@Link <a
     * href='https://android.googlesource.com/platform/frameworks/base/+/jb-release/core/java/android/widget/TextView.java'>TextView.java</a>}
     */
    if (isMultiline()) {
      setSingleLine(false);
    }

    // We override the KeyListener so that all keys on the soft input keyboard as well as hardware
    // keyboards work. Some KeyListeners like DigitsKeyListener will display the keyboard but not
    // accept all input from it
    mKeyListener.setInputType(type);
    setKeyListener(mKeyListener);
  }

[hank121314]

Hi @AndreasA !
expo SDK 39.0.2(with react-native 0.63.2) should not have this issue.
I think your issue might be a different issue 😞 .
I have tested on my real device and did not get that issue.
So this might be a bug on specific device?

[AndreasA]

My teammates and I tested it on two Android 10 devices.
We created a separate TextInputField component that does the styling and adds a field label und such stuff but mostly styling.

It is a functional component which does not do use any useEffect, useState stuff. It looks basically like this:

            <TextInput
                selectionColor={color}
                style={[inputStyle, styles]}
                placeholderTextColor={placeholderColor}
                darkColor={Colors.dark.textOnDark}
                lightColor={Colors.light.textOnDark}
                {...otherProps}
            />

We used that component multiple times in the same form. All fields have the correct placeholder styling, except the one with secureTextEntry.

and in the form we used it like this:

                    <TextInputField
                        label={'Name'}
                        placeholder={'Name'}
                        textContentType="familyName"
                        keyboardType={'default'}
                        autoCapitalize="sentences"
                        value={name}
                        onChangeText={(text): void => {
                            setName(text);
                        }}
                    />
                    <TextInputField
                        label={'E-Mail address'}
                        placeholder={'E-Mail address'}
                        textContentType="emailAddress"
                        keyboardType="email-address"
                        autoCapitalize="none"
                        value={email}
                        onChangeText={(text): void => {
                            setEmail(text.trim());
                        }}
                    />
                    <TextInputField
                        label={'Password'}
                        placeholder={'Password'}
                        textContentType="newPassword"
                        secureTextEntry={true}
                        keyboardType={'default'}
                        autoCapitalize="none"
                        value={password}
                        onChangeText={(text): void => {
                            setPassword(text.trim());
                        }}
                    />

And in the package.json I have the following:
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",

The password/last one has the wrong font the others work fine.

And as mentioned it happend on two devices so I doubt it is device specific.

Interesting is that setting secureTextEntry to false, requires an app restart during development for the new/correct styles to be applied. Otherwise it is stuck with the wrong font but getting the wrong font by setting it to true happens immediately.

[AndreasA]

Adding the following to the TextInputField component I mentioned above fixes the issue:

    const [reapplyInputFontFamilyStyle, setReapplyInputFontFamilyStyle] = React.useState<TextStyle | null>(null);
    React.useEffect(() => {
        setReapplyInputFontFamilyStyle(styles.inputFontFamily);

        /*
         * Re-applying styles in setTimeout for updates to the secure text entry flag,
         * as otherwise the style might be wrong afterwards.
         * In order for this to work, it is necessary to temporary remove the style.
         * In most cases not necessary, as the flag will not change after component mount.
         */
        setTimeout(() => {
            setReapplyInputFontFamilyStyle(null);
            setReapplyInputFontFamilyStyle(styles.inputFontFamily);
        }, 0);
    }, [secureTextEntry]);

[timomeara]

Hi @timomeara .
I have made a pr to fix this issue!
Can you help me to test whether it works? Thanks!

wow, that was quick.
unfortunately, my clients schedule is really aggressive and doesn't leave me much time to circle back on things
hopefully some of the others here can test for you

[helder9991]

I fixed this setting font family by ref in TextInput using useEffect and useRef.

So, i think is better create your Input component with this code to get easier to use.

-> Edit
You can also use a better solution created by @everthon-carniel #30123 (comment) (answered later in this post)

<TextInput 
   placeholder="some text" 
   ref={ref => ref && ref.props && ref.setNativeProps({ 
          text: ref.props.value, 
          style: { fontFamily: 'sans-serif' } 
   })}
/>

Any questions read #30123 (comment) or the other solutions ahead of this post.

[hoangnv98]

I fixed this setting font family by ref in TextInput using useEffect and useRef.

So, i think is better create your Input component with this code to get easier to use.

setNativeprops isn't function

[helder9991]

setNativeprops isn't function

Did you put inputElementRef inside ref props in TextInput ? Or did you wrote 'setNativeprops' instead of 'setNativeProps' with P in lowercase?

[DracotMolver]

I'm facing the same issue. I'd be ideal not to add extra code to something that should work natively :/.

Here's the doc to the above answer:
https://reactnative.dev/docs/direct-manipulation/

If for some reason you are obfuscating and then showing the password from an action, you could do something like this

 useEffect(() => {
    const { fontFamily, secureTextEntry } = props;

    if (textInputRef.current && fontFamily) {
      textInputRef.current.setNativeProps({
         secureTextEntry,
        style: {
          fontFamily,
        },
      });
    }
  }, [secureTextEntry]);

[abhilashdhone]

I fixed this setting font family by ref in TextInput using useEffect and useRef.

So, i think is better create your Input component with this code to get easier to use.

I am trying this in a class component and its not working, it says "this.ref_12.current.setNativeProps" is null

[thgh]

@DracotMolver Thanks, just what I needed! I had a password field that rendered conditionally and used this:

function Example () {
  const passwordInput = useRef<TextInput>(null)
  useEffect(() => {
    passwordInput.current?.setNativeProps({ style: theme.input })
  }, [condition])
  return condition ? ... : <TextInput style={theme.input} secureTextEntry ref={passwordInput} />
}

[JavierLaguna]

Works fine for me with 0.63.4 version

[fermdotnet]

Hey guys,

Seems to be a bug.

I resolved the bug based on previous comments.

    ...
    const ref = useRef(null)
    const [ secured, setSecured ] = useState<boolean>(true)

    ...

    useEffect(() => {
        ref.current.setNativeProps({
            style: {
                fontFamily: '<your font here>'
            }
        })
    }, [ secured ])

    ...

    return (
        <Input
            ref={_ref => {
                ref.current = _ref;
            }}
            secureTextEntry={secured}
    ...

[ivan-khr85]

Bug reproduced with v0.64.0...

[Bardiamist]

I can confirm that bug is back in v0.64.0

[kelset]

yeah looks like the commit with the fix landed on master after the 0.64 branch was cut so it's not there - I've added a reference to the commit in the 0.64.1 issue, thanks folks for reporting 👍

[everthon-carniel]

The problem continues to happen in React Native 0.64. It's not necessary to use useRef or useEffect to change the fontFamily. You can do this directly in the component reference. As below:

<TextInput ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'FONT_NAME' } })} />

[ssilverberry]

@everthon-carniel Thanks a lot, you saved my time, it works!

[ncesar]

The problem continues to happen in React Native 0.64. It's not necessary to use useRef or useEffect to change the fontFamily. You can do this directly in the component reference. As below:

<TextInput ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'FONT_NAME' } })} />

the real answer!! thanks

[melero2000]

The problem continues to happen in React Native 0.64. It's not necessary to use useRef or useEffect to change the fontFamily. You can do this directly in the component reference. As below:

<TextInput ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'FONT_NAME' } })} />

It seems to work, the font does not change it and it is a good sign, but it does not write anything

My code:
<TextInput ref={ref => ref && ref.setNativeProps({style: {fontFamily: 'Krub-Medium'}}) } style={styles.input} placeholder="Introduce tu contraseña" placeholderTextColor="grey" secureTextEntry={showPassword} />

[ssilverberry]

@melero2000 check if you provide a value property to your input and onChangeText one as well

[youssdevx]

The problem continues to happen in React Native 0.64. It's not necessary to use useRef or useEffect to change the fontFamily. You can do this directly in the component reference. As below:

<TextInput ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'FONT_NAME' } })} />

Helped me a lot, thanks :)

[QuetzalTiago]

The problem continues to happen in React Native 0.64. It's not necessary to use useRef or useEffect to change the fontFamily. You can do this directly in the component reference. As below:

<TextInput ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'FONT_NAME' } })} />

This works, thank you, i was about to go crazy lol

[sanduluca]

Bug reproduced with v0.64.1

$ npm list react-native
App@2.0.0 C:\Projects\mercado-app
`-- react-native@0.64.1

[dawidchyrzynski]

Hi guys,

I'm getting the same result as @melero2000 with RN 0.64.1. Any idea how to fix this?

[helder9991]

Hi guys,

I'm getting the same result as @melero2000 with RN 0.64.1. Any idea how to fix this?

The function 'setNativeProps' is overwriting the property 'text' to a empty string. You can see this setting:
setNativeProps( { text: "some text" } )

You can fix this problem setting the current value of input in the 'setNativeProps' function (remember to check if ref.props exists)

 <TextInput 
      placeholder="some text" 
      ref={ref => ref && ref.props && ref.setNativeProps({ 
             text: ref.props.value, 
             style: { fontFamily: 'sans-serif' } 
      })}
    />

You can also fix this problem using 'useState' from react library.

import React, { useState } from 'react';
import { TextInput } from 'react-native';

export default function App() {
  const [inputValue, setInputValue] = useState('');
  return (
    <TextInput 
      placeholder="some text" 
      value={inputValue} // show the value of "inputValue" in TextInput
      onChangeText={(text) => setInputValue(text)} // if the text change, you call the function to save in "inputValue" variable
      ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'sans-serif' } })}
      />
  ); 
}

[appasaheb4]

customs font adding after text not center showing any idea?

[JainBhavesh]

The problem continues to happen in React Native 0.64. It's not necessary to use useRef or useEffect to change the fontFamily. You can do this directly in the component reference. As below:
<TextInput ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'FONT_NAME' } })} />

It seems to work, the font does not change it and it is a good sign, but it does not write anything

My code:
<TextInput ref={ref => ref && ref.setNativeProps({style: {fontFamily: 'Krub-Medium'}}) } style={styles.input} placeholder="Introduce tu contraseña" placeholderTextColor="grey" secureTextEntry={showPassword} />

please add value prop issue will solve

[rin2k]

<TextInput ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'FONT_NAME' } })} /> working v0.64.1

[leolusoli]

This is Issue isn't closed and not resolved in 0.64.2 so please re-open it!

[rbary]

Still have the bug in 0.63.3.... and @everthon-carniel fix works.

[prakashkrsingh0]

The problem continues to happen in React Native 0.64. It's not necessary to use useRef or useEffect to change the fontFamily. You can do this directly in the component reference. As below:

<TextInput ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'FONT_NAME' } })} />

thank you so much .. this resolves my problem also.

[adityamohta]

This is working perfectly for me:

The refs can be both defined or undefined when the component is being mounted.

Add the following to your component:

  const _inputRef = useRef(null);
  const setRef = useCallback((node) => {
    if (_inputRef.current) {
      // Make sure to cleanup any events/references added to the last instance
    }
    if (node) {
      // Check if a node is actually passed. Otherwise node would be null.
      // You can now do what you need to, setNativeProps, addEventListeners, measure, etc.
      // Important Tip: you can also hide (not unmount) the component till this part
      node.setNativeProps({
        style: { fontFamily: "Quicksand-Medium" },
      });
    }
    // Save a reference to the node
    _inputRef.current = node;
  }, []);

Make sure your TextInput has this ref assigned:

    <TextInput ref={setRef} ... />