React-native-chart-kit: Invariant Violation: [233, "RNSVGText",71...] is not usable as a native method argument.

Created on 6 Mar 2020  路  2Comments  路  Source: indiespirit/react-native-chart-kit

I have this error in my React Native(Expo) app:

Invariant Violation: [233,"RNSVGText",71,{"matrix":[1,0,0,1,0,0],"x":[52],"y":["<<NaN>>"],"propList":["fill"],"opacity":1,"fill":[0,3439329279],"fillRule":1,"fillOpacity":1,"stroke":null,"strokeOpacity":1,"strokeLinecap":0,"strokeLinejoin":0,"strokeDasharray":null,"strokeWidth":1,"strokeDashoffset":null,"strokeMiterlimit":4,"vectorEffect":0,"font":{"fontSize":12,"textAnchor":"end"},"dx":[],"dy":[],"rotate":[]}] is not usable as a native method argument

This error is located at:
    in RNSVGText (at Text.tsx:41)
    in Text (at abstract-chart.js:138)
    in RNSVGGroup (at G.tsx:28)
    in G (at bar-chart.js:111)
    in RNSVGGroup (at G.tsx:28)
    in G (at Svg.tsx:170)
    in RNSVGSvgView (at Svg.tsx:157)
    in Svg (at bar-chart.js:90)
    in RCTView (at bar-chart.js:89)
    in BarChart (at Chart/index.js:46)
    in RCTView (created by Context.Consumer)
    in StyledNativeComponent (created by Styled(RCTView))
    in Styled(RCTView) (at Chart/index.js:37)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at TouchableOpacity.js:308)
    in TouchableOpacity (created by Context.Consumer)
    in StyledNativeComponent (created by Styled(TouchableOpacity))
    in Styled(TouchableOpacity) (at Chart/index.js:35)
    in Chart (at Home/index.js:314)
    in RCTView (created by Context.Consumer)
    in StyledNativeComponent (created by Styled(RCTView))
    in Styled(RCTView) (at Home/index.js:313)
    in RCTView (created by Context.Consumer)
    in StyledNativeComponent (created by Styled(RCTView))
    in Styled(RCTView) (at Home/index.js:289)
    in RCTView (at src/index.js:329)
    in RCTScrollContentView (at ScrollView.js:1038)
    in RCTScrollView (at ScrollView.js:1151)
    in ScrollView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at src/index.js:432)
    in RCTView (at src/index.js:129)
    in ParallaxScrollView (at Home/index.js:257)
    in RCTView (created by Context.Consumer)
    in StyledNativeComponent (created by Styled(RCTView))
    in Styled(RCTView) (at Home/index.js:230)
    in Home (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:900)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:100)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:131)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at src/index.tsx:72)
    in RCTView (at Transitioning.js:133)
    in Wrapped (at src/index.tsx:67)
    in AnimatedSwitchView (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer (at App.js:15)
    in RCTView (at App.js:10)
    in App (at withExpoRoot.js:26)
    in RootErrorBoundary (at withExpoRoot.js:25)
    in ExpoRoot (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in DevAppContainer (at AppContainer.js:115)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

fn
    NativeModules.js:137:10
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
dispatchAction
    [native code]:0
setTimeout$argument_0
    index.js:187:10
callFunctionReturnFlushedQueue
    [native code]:0

My dependencies:

"expo": "^36.0.0",
"react-native-chart-kit": "^5.1.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",

Anybody help me?

Most helpful comment

This happened when I tried to use a percentage in width or height, changing to number fixed the problem for me.

All 2 comments

This happened when I tried to use a percentage in width or height, changing to number fixed the problem for me.

Edit: nevermind, it was faulty data in my case
An probably also in yours, see the error message, specifically:

y":["<<NaN>>"]"

check your input or other props

Was this page helpful?
0 / 5 - 0 ratings