"fontVariant" style array value is deprecated. Use space-separated values.

[qwertychouskie]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

"fontVariant" style array value is deprecated. Use space-separated values.

Style definition of font looks like this:

export const mySansSerif:TextStyle = {
    fontFamily: "Neutraface Two Text Demi",
    fontVariant: ['lining-nums'],
    textTransform: "uppercase",
}

If I remove the array brackets, I get this error in VSCode:

Type 'string' is not assignable to type 'FontVariant[]'.ts(2322)
StyleSheetTypes.d.ts(317, 3): The expected type comes from property 'fontVariant' which is declared here on type 'TextStyle'
(property) TextStyleIOS.fontVariant?: FontVariant[] | undefined

Expected behavior

I should be able to use fontVariant in some way without deprecation warnings or errors

Steps to reproduce

Use above font style definition

Test case

https://codesandbox.io/p/devbox/loving-hertz-zqnhkc?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm11cuswk00072e695yu6gcze%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm11cuswk00022e69kbfft426%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm11cuswk00042e699zhe23az%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm11cuswk00062e691x2mq6l2%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm11cuswk00022e69kbfft426%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm11cuswk00012e6954wuaj2i%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cm11cvf3l00022e68n5mou3gh%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm11cuswk00022e69kbfft426%2522%252C%2522activeTabId%2522%253A%2522cm11cvf3l00022e68n5mou3gh%2522%257D%252C%2522cm11cuswk00062e691x2mq6l2%2522%253A%257B%2522id%2522%253A%2522cm11cuswk00062e691x2mq6l2%2522%252C%2522activeTabId%2522%253A%2522cm11cxddd00102e68xevgk13p%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm11cuswk00052e69zk1immkv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522port%2522%253A8080%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A8080%252C%2522taskId%2522%253A%2522start%2522%252C%2522id%2522%253A%2522cm11cvmzb000r2e683exrq6sj%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A8080%252C%2522taskId%2522%253A%2522start%2522%252C%2522id%2522%253A%2522cm11cxddd00102e68xevgk13p%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm11cuswk00042e699zhe23az%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm11cuswk00032e69h7dmh8rz%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%255D%252C%2522id%2522%253A%2522cm11cuswk00042e699zhe23az%2522%252C%2522activeTabId%2522%253A%2522cm11cuswk00032e69h7dmh8rz%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Additional comments

I also have a similar issue with shadow* props that I haven't been able to figure out either:

"shadow*" style props are deprecated. Use "boxShadow".

The style causing the error:

export const textWithShadow:TextStyle = {
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: 2, height: 2},
    textShadowRadius: 8,
}