Skip to content

Commit

Permalink
Feat/fontweight number value (#34598)
Browse files Browse the repository at this point in the history
Summary:
This PR adds support for number values for `fontWeight` as requested in #34425.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[General] [Added] - Added support for number values in fontWeight.

Pull Request resolved: #34598

Test Plan:
```js
<Text style={{ fontWeight: 900, color: 'red' }}>
  Hello World
</Text>
```

Reviewed By: jacdebug

Differential Revision: D39268920

Pulled By: cipolleschi

fbshipit-source-id: 9bb711677bf173f9904b74f382659042856efd83
  • Loading branch information
ankit-tailor authored and facebook-github-bot committed Sep 12, 2022
1 parent 4e70376 commit f1c1f81
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 4 deletions.
38 changes: 37 additions & 1 deletion Libraries/StyleSheet/StyleSheetTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -566,6 +566,23 @@ export type ____ViewStyle_Internal = $ReadOnly<{
...____ViewStyle_InternalOverrides,
}>;

export type FontStyleType = {
fontFamily: string,
fontWeight: ____FontWeight_Internal,
};

export type FontStyleMap = {
ultraLight: FontStyleType,
thin: FontStyleType,
light: FontStyleType,
regular: FontStyleType,
medium: FontStyleType,
semibold: FontStyleType,
bold: FontStyleType,
heavy: FontStyleType,
black: FontStyleType,
};

export type ____FontWeight_Internal =
| 'normal'
| 'bold'
Expand All @@ -577,7 +594,26 @@ export type ____FontWeight_Internal =
| '600'
| '700'
| '800'
| '900';
| '900'
| 100
| 200
| 300
| 400
| 500
| 600
| 700
| 800
| 900
| 'ultralight'
| 'thin'
| 'light'
| 'medium'
| 'regular'
| 'semibold'
| 'condensedBold'
| 'condensed'
| 'heavy'
| 'black';

export type ____TextStyle_InternalCore = $ReadOnly<{
...$Exact<____ViewStyle_Internal>,
Expand Down
12 changes: 9 additions & 3 deletions Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ import Platform from '../Utilities/Platform';
import * as PressabilityDebug from '../Pressability/PressabilityDebug';
import usePressability from '../Pressability/usePressability';
import StyleSheet from '../StyleSheet/StyleSheet';
import flattenStyle from '../StyleSheet/flattenStyle';
import processColor from '../StyleSheet/processColor';
import TextAncestor from './TextAncestor';
import {NativeText, NativeVirtualText} from './TextNativeComponent';
import {type TextProps} from './TextProps';
import * as React from 'react';
import {useContext, useMemo, useState} from 'react';
import flattenStyle from '../StyleSheet/flattenStyle';

/**
* Text is the fundamental component for displaying text.
Expand Down Expand Up @@ -201,6 +201,12 @@ const Text: React.AbstractComponent<
default: accessible,
});

let flattenedStyle = flattenStyle(style);

if (typeof flattenedStyle?.fontWeight === 'number') {
flattenedStyle.fontWeight = flattenedStyle?.fontWeight.toString();
}

return hasTextAncestor ? (
<NativeVirtualText
{...restProps}
Expand All @@ -213,7 +219,7 @@ const Text: React.AbstractComponent<
nativeID={id ?? nativeID}
numberOfLines={numberOfLines}
selectionColor={selectionColor}
style={style}
style={flattenedStyle}
ref={forwardedRef}
/>
) : (
Expand All @@ -232,7 +238,7 @@ const Text: React.AbstractComponent<
nativeID={id ?? nativeID}
numberOfLines={numberOfLines}
selectionColor={selectionColor}
style={style}
style={flattenedStyle}
ref={forwardedRef}
/>
</TextAncestor.Provider>
Expand Down
9 changes: 9 additions & 0 deletions packages/rn-tester/js/examples/Text/TextExample.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,15 @@ class TextExample extends React.Component<{...}> {
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
<Text style={{fontWeight: 900}}>FONT WEIGHT 900</Text>
<Text style={{fontWeight: 800}}>FONT WEIGHT 800</Text>
<Text style={{fontWeight: 700}}>FONT WEIGHT 700</Text>
<Text style={{fontWeight: 600}}>FONT WEIGHT 600</Text>
<Text style={{fontWeight: 500}}>FONT WEIGHT 500</Text>
<Text style={{fontWeight: 400}}>FONT WEIGHT 400</Text>
<Text style={{fontWeight: 300}}>FONT WEIGHT 300</Text>
<Text style={{fontWeight: 200}}>FONT WEIGHT 200</Text>
<Text style={{fontWeight: 100}}>FONT WEIGHT 100</Text>
</RNTesterBlock>
<RNTesterBlock title="Font Style">
<Text style={{fontStyle: 'italic'}}>Move fast and be italic</Text>
Expand Down
9 changes: 9 additions & 0 deletions packages/rn-tester/js/examples/Text/TextExample.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -681,6 +681,15 @@ exports.examples = [
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
<Text style={{fontWeight: 900}}>FONT WEIGHT 900</Text>
<Text style={{fontWeight: 800}}>FONT WEIGHT 800</Text>
<Text style={{fontWeight: 700}}>FONT WEIGHT 700</Text>
<Text style={{fontWeight: 600}}>FONT WEIGHT 600</Text>
<Text style={{fontWeight: 500}}>FONT WEIGHT 500</Text>
<Text style={{fontWeight: 400}}>FONT WEIGHT 400</Text>
<Text style={{fontWeight: 300}}>FONT WEIGHT 300</Text>
<Text style={{fontWeight: 200}}>FONT WEIGHT 200</Text>
<Text style={{fontWeight: 100}}>FONT WEIGHT 100</Text>
</View>
);
},
Expand Down

0 comments on commit f1c1f81

Please sign in to comment.