[Fix] Android: font-family is not apply when secureTextEntry is true

[hank121314]

Summary

This pr fixes: #30123 .

When secureTextEntry is true, setInputType will set the inputType of textInput to password type.
Password type default font-family will be monospace font, so we need to setTypeface after the setInputType.

Changelog

[Android] [Fixed] - Font family is not apply when secureTextEntry is true.

Test Plan

Before this pr:

After this pr:

Please initiated a new project and replaced the App.js with the following code:

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

const App = () => {
  return (
    <SafeAreaView>
      <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'}}
      />
    </SafeAreaView>
  );
};

export default App;

Thanks you so much for your code review!

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 4d247fe

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,389,897	0
android	hermes	armeabi-v7a	7,017,213	0
android	hermes	x86	7,832,109	0
android	hermes	x86_64	7,721,595	0
android	jsc	arm64-v8a	9,536,198	0
android	jsc	armeabi-v7a	9,151,226	0
android	jsc	x86	9,400,874	0
android	jsc	x86_64	9,982,584	0

Base commit: 4d247fe

[AndreasA]

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);
  }

[fstefanello]

I am facing the same problem here...

[wcandillon]

I tried the patch (not using expo) but it didn't fix the issue.

[hank121314]

I tried the patch (not using expo) but it didn't fix the issue.

Hi @wcandillon
How did you patch this PR?
Did you use building from source ?
And also thanks for your testing!

[wcandillon]

@hank121314 oh I see, I didn't build from source, sorry about that. Going through the instructions now.

[ramazanarslan]

How can i implement it temporarily to publish app with correct font?
i checked that pr and changed the filenode_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java, than i started app after i run ./gradlew clean and react-native start --reset-cache. But i could not see that it is fixed. can you enlight me?

[hank121314]

How can i implement it temporarily to publish app with correct font?
i checked that pr and changed the filenode_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java, than i started app after i run ./gradlew clean and react-native start --reset-cache. But i could not see that it is fixed. can you enlight me?

Hi @ramazanarslan .
You should use building from source to patch any of java native code change.
Just follow the instructions from the url above.

[facebook-github-bot]

@hramos has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @hank121314 in 00d9dea.

^{When will my fix make it into a release? | Upcoming Releases}