8000 handle font-variant text style prop by InkaAlicja · Pull Request #1524 · nativewind/nativewind · GitHub
[go: up one dir, main page]
Skip to content

handle font-variant text style prop #1524

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

handle font-variant text style prop #1524

wants to merge 1 commit into from

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
0