nandorojo / dripsy

🍷 Responsive, unstyled UI primitives for React Native + Web.
https://dripsy.xyz
MIT License
2.01k stars 80 forks source link

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

Closed SMhdAsadi closed 2 years ago

SMhdAsadi commented 2 years ago

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 commented 2 years ago

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

SMhdAsadi commented 2 years ago

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 (

Hello World

); }

export default App;


You will then see this error on iOS simulator:
<img alt="simulator_screenshot" src="https://user-images.githubusercontent.com/63557556/182022803-cf1a955c-e87e-45db-b1b7-6af22244c677.png" width="40%" />

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](https://snack.expo.dev/@smhdasadi/dripsyfontvarianterror).
nandorojo commented 2 years ago

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

rafaelrinaldi commented 1 year ago

@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.