fontVariant: ['small-caps'] doesn't work

[SMhdAsadi]

I can't use fontVariant: ['small-caps'] in sx prop. This causes below error on iOS simulator:

JSON value 'small-caps' of type NSString cannot be converted to NSArray

In Android app crashes with this log:

FATAL EXCEPTION: main
Process: proccess_name, PID: 7000
java.lang.IllegalStateException: com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 105
 detail: View tag:115 View Type:class com.facebook.react.views.view.ReactViewGroup
  children(0): [
 ],
  viewsToAdd(1): [
[0,105],
 ],

	at com.facebook.react.bridge.ReactContext.handleException(ReactContext.java:431)
	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:31)
	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1035)
	at android.view.Choreographer.doCallbacks(Choreographer.java:845)
	at android.view.Choreographer.doFrame(Choreographer.java:775)
	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1022)
	at android.os.Handler.handleCallback(Handler.java:938)
	at android.os.Handler.dispatchMessage(Handler.java:99)
	at android.os.Looper.loopOnce(Looper.java:201)
	at android.os.Looper.loop(Looper.java:288)
	at android.app.ActivityThread.main(ActivityThread.java:7839)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)
Caused by: com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 105
 detail: View tag:115 View Type:class com.facebook.react.views.view.ReactViewGroup
  children(0): [
 ],
  viewsToAdd(1): [
[0,105],
 ],

	at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:513)
	at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.manageChildren(ReanimatedNativeHierarchyManager.java:306)
	at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:217)
	at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:915)
	at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1026)
	at com.facebook.react.uimanager.UIViewOperationQueue.access$2600(UIViewOperationQueue.java:47)
	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1086)
	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
	... 14 more

But I can use this in plain style prop. Initially I've tested fontVariant inside a text variant in my theme and the same error was showing. How can I use fontVariant with dripsy?

ReactNative version: 0.69.2 Dripsy version: 3.6.0

[nandorojo]

does it work if you pass a string but not an array? could you make an expo snack?

[SMhdAsadi]

It is easy to reproduce this issue:

1. Init a new react native project with typescript template
2. Install Dripsy
3. Change your App.tsx file to this:

import React from 'react';
import {View, Text, makeTheme, DripsyProvider} from 'dripsy';

const theme = makeTheme({});

function App() {
  return (
    <DripsyProvider theme={theme}>
      <View
        sx={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'white',
        }}>
        <Text sx={{fontVariant: ['small-caps']}}>Hello World</Text>
      </View>
    </DripsyProvider>
  );
}

export default App;

You will then see this error on iOS simulator:

I've tried 'small-caps' both as a string and a single value array. None of them work.

If I change sx to style, small-caps works perfectly.

p.s. this is the snack.

[nandorojo]

Fixed in 3.7.4. The issue was that fontVariant was an array. Let me know if that works!

[rafaelrinaldi]

@nandorojo Just a heads up that this is still not working for me with the latest Dripsy. Tried passing down fontVariant via sx and it was crashing on the iOS simulator (either by string or array).

Had to go with @SMhdAsadi's workaround and set it via style instead.