Fix medium font weights for TextInput on Android

[janicduplessis]

Summary

When using a medium (500) font weight on Android the wrong weight is used for the placeholder and for the first few seconds of input (before it gets text back from JS). To fix it I refactored the way we handle text styles (family, weight, style) to create a typeface to be more like the Text component.

Since all these 3 props are linked and used to create the typeface object it makes more sense to do it at the end of setting props instead of in each prop handler and trying to recreate the object without losing styles set by other prop handlers. Do do that we now store fontFamily, fontStyle and fontWeight as ivar of the ReactEditText class. At the end of updating prop if any of those changed we recreate the typeface object.

This doesn't actually fix the bug but was a first step towards it. There were a bunch of TODOs in the code to remove duplication between Text and TextInput for parsing and creating the typeface object. To do that I simply moved the code to util functions in a static class. Once the duplication was removed the bug was fixed! I assume proper support for medium font weights was added for Text but not in the duplicated code for TextInput.

Changelog

[Android] [Fixed] - Fix medium font weights for TextInput on Android

Test Plan

Tested in my app and in RNTester that custom styles for both text and textinput all seem to work.

Repro in RNTester:

function Bug() {
  const [value, setValue] = React.useState('');
  return (
    <TextInput
      style={[
        styles.singleLine,
        {fontFamily: 'sans-serif', fontWeight: '500', fontSize: 32},
      ]}
      placeholder="Sans-Serif 500"
      value={value}
      onChangeText={setValue}
    />
  );
}

Before:

After:

[JoshuaGross]

This seems reasonable to me. I like that we're consolidating all of this logic in a single place now.

[facebook-github-bot]

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

[JoshuaGross]

@janicduplessis Can you update TextInputExample.android.js and TextInputExample.ios.js (for good measure) so that medium-weight fonts have an explicit test built into RNTester? Thanks.

[janicduplessis]

@JoshuaGross Done, would be nice to consolidate the TextInput RNTester example in the same file, both seem to be pretty out of sync and most examples should be the same.

[JoshuaGross]

@janicduplessis Definitely agreed. Any real differences can/should be done with platform checks in the same file IMO.

[facebook-github-bot]

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

[facebook-github-bot]

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

[JoshuaGross]

On a Pixel 2, in RNTester, the medium-weight example looks the same to me as the normal-weight example. Is this expected?

[dulmandakh]

Medium weight is supported on only API 28+ or Android 9+ devices.

[JoshuaGross]

I'll merge this one on Monday.

[react-native-bot]

This pull request was successfully merged by @janicduplessis in 8b9f790.

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