Skip to content

Commit f1c1f81

Browse files
ankit-tailorfacebook-github-bot
authored andcommitted
Feat/fontweight number value (#34598)
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
1 parent 4e70376 commit f1c1f81

File tree

4 files changed

+64
-4
lines changed

4 files changed

+64
-4
lines changed

Libraries/StyleSheet/StyleSheetTypes.js

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -566,6 +566,23 @@ export type ____ViewStyle_Internal = $ReadOnly<{
566566
...____ViewStyle_InternalOverrides,
567567
}>;
568568

569+
export type FontStyleType = {
570+
fontFamily: string,
571+
fontWeight: ____FontWeight_Internal,
572+
};
573+
574+
export type FontStyleMap = {
575+
ultraLight: FontStyleType,
576+
thin: FontStyleType,
577+
light: FontStyleType,
578+
regular: FontStyleType,
579+
medium: FontStyleType,
580+
semibold: FontStyleType,
581+
bold: FontStyleType,
582+
heavy: FontStyleType,
583+
black: FontStyleType,
584+
};
585+
569586
export type ____FontWeight_Internal =
570587
| 'normal'
571588
| 'bold'
@@ -577,7 +594,26 @@ export type ____FontWeight_Internal =
577594
| '600'
578595
| '700'
579596
| '800'
580-
| '900';
597+
| '900'
598+
| 100
599+
| 200
600+
| 300
601+
| 400
602+
| 500
603+
| 600
604+
| 700
605+
| 800
606+
| 900
607+
| 'ultralight'
608+
| 'thin'
609+
| 'light'
610+
| 'medium'
611+
| 'regular'
612+
| 'semibold'
613+
| 'condensedBold'
614+
| 'condensed'
615+
| 'heavy'
616+
| 'black';
581617

582618
export type ____TextStyle_InternalCore = $ReadOnly<{
583619
...$Exact<____ViewStyle_Internal>,

Libraries/Text/Text.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ import Platform from '../Utilities/Platform';
1414
import * as PressabilityDebug from '../Pressability/PressabilityDebug';
1515
import usePressability from '../Pressability/usePressability';
1616
import StyleSheet from '../StyleSheet/StyleSheet';
17+
import flattenStyle from '../StyleSheet/flattenStyle';
1718
import processColor from '../StyleSheet/processColor';
1819
import TextAncestor from './TextAncestor';
1920
import {NativeText, NativeVirtualText} from './TextNativeComponent';
2021
import {type TextProps} from './TextProps';
2122
import * as React from 'react';
2223
import {useContext, useMemo, useState} from 'react';
23-
import flattenStyle from '../StyleSheet/flattenStyle';
2424

2525
/**
2626
* Text is the fundamental component for displaying text.
@@ -201,6 +201,12 @@ const Text: React.AbstractComponent<
201201
default: accessible,
202202
});
203203

204+
let flattenedStyle = flattenStyle(style);
205+
206+
if (typeof flattenedStyle?.fontWeight === 'number') {
207+
flattenedStyle.fontWeight = flattenedStyle?.fontWeight.toString();
208+
}
209+
204210
return hasTextAncestor ? (
205211
<NativeVirtualText
206212
{...restProps}
@@ -213,7 +219,7 @@ const Text: React.AbstractComponent<
213219
nativeID={id ?? nativeID}
214220
numberOfLines={numberOfLines}
215221
selectionColor={selectionColor}
216-
style={style}
222+
style={flattenedStyle}
217223
ref={forwardedRef}
218224
/>
219225
) : (
@@ -232,7 +238,7 @@ const Text: React.AbstractComponent<
232238
nativeID={id ?? nativeID}
233239
numberOfLines={numberOfLines}
234240
selectionColor={selectionColor}
235-
style={style}
241+
style={flattenedStyle}
236242
ref={forwardedRef}
237243
/>
238244
</TextAncestor.Provider>

packages/rn-tester/js/examples/Text/TextExample.android.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,15 @@ class TextExample extends React.Component<{...}> {
392392
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
393393
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
394394
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
395+
<Text style={{fontWeight: 900}}>FONT WEIGHT 900</Text>
396+
<Text style={{fontWeight: 800}}>FONT WEIGHT 800</Text>
397+
<Text style={{fontWeight: 700}}>FONT WEIGHT 700</Text>
398+
<Text style={{fontWeight: 600}}>FONT WEIGHT 600</Text>
399+
<Text style={{fontWeight: 500}}>FONT WEIGHT 500</Text>
400+
<Text style={{fontWeight: 400}}>FONT WEIGHT 400</Text>
401+
<Text style={{fontWeight: 300}}>FONT WEIGHT 300</Text>
402+
<Text style={{fontWeight: 200}}>FONT WEIGHT 200</Text>
403+
<Text style={{fontWeight: 100}}>FONT WEIGHT 100</Text>
395404
</RNTesterBlock>
396405
<RNTesterBlock title="Font Style">
397406
<Text style={{fontStyle: 'italic'}}>Move fast and be italic</Text>

packages/rn-tester/js/examples/Text/TextExample.ios.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -681,6 +681,15 @@ exports.examples = [
681681
<Text style={{fontWeight: '300'}}>FONT WEIGHT 300</Text>
682682
<Text style={{fontWeight: '200'}}>FONT WEIGHT 200</Text>
683683
<Text style={{fontWeight: '100'}}>FONT WEIGHT 100</Text>
684+
<Text style={{fontWeight: 900}}>FONT WEIGHT 900</Text>
685+
<Text style={{fontWeight: 800}}>FONT WEIGHT 800</Text>
686+
<Text style={{fontWeight: 700}}>FONT WEIGHT 700</Text>
687+
<Text style={{fontWeight: 600}}>FONT WEIGHT 600</Text>
688+
<Text style={{fontWeight: 500}}>FONT WEIGHT 500</Text>
689+
<Text style={{fontWeight: 400}}>FONT WEIGHT 400</Text>
690+
<Text style={{fontWeight: 300}}>FONT WEIGHT 300</Text>
691+
<Text style={{fontWeight: 200}}>FONT WEIGHT 200</Text>
692+
<Text style={{fontWeight: 100}}>FONT WEIGHT 100</Text>
684693
</View>
685694
);
686695
},

0 commit comments

Comments
 (0)