Skip to content

handle font-variant text style prop#1524

Open
InkaAlicja wants to merge 1 commit intonativewind:mainfrom
InkaAlicja:@InkaAlicja/font-variant-text-style-prop
Open

handle font-variant text style prop#1524
InkaAlicja wants to merge 1 commit intonativewind:mainfrom
InkaAlicja:@InkaAlicja/font-variant-text-style-prop

Conversation

@InkaAlicja
Copy link

@InkaAlicja InkaAlicja commented Jul 10, 2025 •
edited
Loading

font-variant was not being handled. For example this: <Text className="[font-variant:small-caps]">Hello!</Text> was not actually using small-caps. But according to RN docs, fontVariant is a valid text style prop.

I tested this by using the following patch in my own repo, which uses nativewind:

diff --git a/dist/css-to-rn/parseDeclaration.js b/dist/css-to-rn/parseDeclaration.js
index 59ea66e459dbf6922bcd80a6ac014408ca13c2af..693fbae6cafc7d4a65033c95c00a3fd4a2a364f1 100644
--- a/dist/css-to-rn/parseDeclaration.js
+++ b/dist/css-to-rn/parseDeclaration.js
@@ -94,6 +94,7 @@ const validProperties = [
     "font-size",
     "font-style",
     "font-variant-caps",
+    "font-variant",
     "font-weight",
     "gap",
     "height",
@@ -761,6 +762,8 @@ function parseDeclaration(declaration, options) {
             return addStyleProp(declaration.property, parseFontStyle(declaration.value, parseOptions));
         case "font-variant-caps":
             return addStyleProp(declaration.property, parseFontVariantCaps(declaration.value, parseOptions));
+        case "font-variant":
+            return addStyleProp(declaration.property, parseFontVariantCaps(declaration.value, parseOptions));
         case "line-height":
             return addStyleProp(declaration.property, parseLineHeight(declaration.value, parseOptions));
         case "font":

Using this patch made <Text className="[font-variant:small-caps]">Hello!</Text> actually use small-caps.

I also added a FontVariant type. The css font-variant property allows much more values (docs), but the RN fontVariant text style prop allows the values I listed in the type (docs).
Either way as can be seen by the already existing parseFontVariantCaps function, these are the only values react-native-css-interop was allowing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@InkaAlicja