Victory-native: Cannot read property 'axis' of undefined -> blank screen

Created on 11 Dec 2017  路  6Comments  路  Source: FormidableLabs/victory-native

Randomly this error suddenly pops op, which results in a completely black screen on iOS and grey screen on Android.

It works 95% of the time, but out of nowhere this error pops up.

Happens on all devices. Both in development and production. Getting complaints from users that this happens, and I've provoked several times simply by spending a bit of time on the app where I'm using Charts/Axis. No pattern on how to provoke it. Happens randomly.

Running:
React Native 0.51.0
React 16.0.0
victory-native 0.16.1
"react-native-svg": "^6.0.1-rc.1",

Log:
TypeError: Cannot read property 'axis' of undefined

This error is located at:
in VictoryAxis (at Chart.js:85)
in RNSVGSvgView (at Svg.js:83)
in Svg (at victory-container.js:88)
in RCTView (at View.js:112)
in View (at victory-container.js:85)
in VictoryContainer (at victory-chart.js:13)
in VictoryChart (at Chart.js:84)
in RCTView (at View.js:112)
in View (at Chart.js:79)
in RCTView (at View.js:112)
in View (at Chart.js:49)
in Chart (at HomeScreen.js:775)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:857)
in ScrollView (at HomeScreen.js:765)
in RCTView (at View.js:112)
in View (at ImageBackground.js:68)
in ImageBackground (at BackgroundImage.js:11)
in BackgroundImage (at HomeScreen.js:763)
in HomeScreen (created by Connect(HomeScreen))
in Connect(HomeScreen) (at SceneView.js:31)
in SceneView (at TabView.js:82)
in RCTView (at View.js:112)
in View (at TabView.js:81)
in RCTView (at View.js:112)
in View (at TabViewPagerScroll.js:138)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:857)
in ScrollView (at TabViewPagerScroll.js:117)
in TabViewPagerScroll (at TabViewAnimated.js:77)
in RCTView (at View.js:112)
in View (at TabViewAnimated.js:252)
in TabViewAnimated (at TabView.js:225)
in TabView (at withCachedChildNavigation.js:66)
in withCachedChildNavigation(TabView) (at TabNavigator.js:65)
in Unknown (at createNavigator.js:52)
in Navigator (at createNavigationContainer.js:216)
in NavigationContainer (at SceneView.js:31)
in SceneView (at CardStack.js:405)
in RCTView (at View.js:112)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at Card.js:26)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:436)
in RCTView (at View.js:112)
in View (at CardStack.js:365)
in RCTView (at View.js:112)
in View (at CardStack.js:364)
in CardStack (at CardStackTransitioner.js:97)
in RCTView (at View.js:112)
in View (at Transitioner.js:187)
in Transitioner (at CardStackTransitioner.js:49)
in CardStackTransitioner (at StackNavigator.js:60)
in Unknown (at createNavigator.js:52)
in Navigator (at createNavigationContainer.js:216)
in NavigationContainer (at AppNavigator.js:110)
in Unknown (at App.js:76)
in Provider (at App.js:75)
in App (at renderApplication.js:35)
in RCTView (at View.js:112)
in View (at AppContainer.js:102)
in RCTView (at View.js:112)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
handleException @ ExceptionsManager.js:65
ReactNativeFiberErrorDialog @ ReactNativeFiber-dev.js:231
logCapturedError @ ReactNativeFiber-dev.js:19
captureError @ ReactNativeFiber-dev.js:2649
performWork @ ReactNativeFiber-dev.js:2601
scheduleUpdateImpl @ ReactNativeFiber-dev.js:2728
scheduleUpdate @ ReactNativeFiber-dev.js:2711
enqueueSetState @ ReactNativeFiber-dev.js:1514
Component.setState @ react.development.js:237
HomeScreen._this.formatCandleStickData @ HomeScreen.js:575
_callee3$ @ HomeScreen.js:268
tryCatch @ runtime.js:62
invoke @ runtime.js:296
prototype.(anonymous function) @ runtime.js:114
tryCatch @ runtime.js:62
invoke @ runtime.js:152
(anonymous) @ runtime.js:162
tryCallOne @ core.js:37
(anonymous) @ core.js:123
(anonymous) @ JSTimers.js:301
_callTimer @ JSTimers.js:154
_callImmediatesPass @ JSTimers.js:202
callImmediates @ JSTimers.js:470
__callImmediates @ MessageQueue.js:275
(anonymous) @ MessageQueue.js:140
__guard @ MessageQueue.js:262
flushedQueue @ MessageQueue.js:139
callFunctionReturnFlushedQueue @ MessageQueue.js:114
t @ RNDebuggerWorker.js:1
console.js:32 Error message --- TypeError: TypeError: Cannot read property 'axis' of undefined

This error is located at:
in VictoryAxis (at Chart.js:85)
in RNSVGSvgView (at Svg.js:83)
in Svg (at victory-container.js:88)
in RCTView (at View.js:112)
in View (at victory-container.js:85)
in VictoryContainer (at victory-chart.js:13)
in VictoryChart (at Chart.js:84)
in RCTView (at View.js:112)
in View (at Chart.js:79)
in RCTView (at View.js:112)
in View (at Chart.js:49)
in Chart (at HomeScreen.js:775)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:857)
in ScrollView (at HomeScreen.js:765)
in RCTView (at View.js:112)
in View (at ImageBackground.js:68)
in ImageBackground (at BackgroundImage.js:11)
in BackgroundImage (at HomeScreen.js:763)
in HomeScreen (created by Connect(HomeScreen))
in Connect(HomeScreen) (at SceneView.js:31)
in SceneView (at TabView.js:82)
in RCTView (at View.js:112)
in View (at TabView.js:81)
in RCTView (at View.js:112)
in View (at TabViewPagerScroll.js:138)
in RCTScrollContentView (at ScrollView.js:748)
in RCTScrollView (at ScrollView.js:857)
in ScrollView (at TabViewPagerScroll.js:117)
in TabViewPagerScroll (at TabViewAnimated.js:77)
in RCTView (at View.js:112)
in View (at TabViewAnimated.js:252)
in TabViewAnimated (at TabView.js:225)
in TabView (at withCachedChildNavigation.js:66)
in withCachedChildNavigation(TabView) (at TabNavigator.js:65)
in Unknown (at createNavigator.js:52)
in Navigator (at createNavigationContainer.js:216)
in NavigationContainer (at SceneView.js:31)
in SceneView (at CardStack.js:405)
in RCTView (at View.js:112)
in View (at createAnimatedComponent.js:134)
in AnimatedComponent (at Card.js:26)
in Card (at PointerEventsContainer.js:55)
in Container (at CardStack.js:436)
in RCTView (at View.js:112)
in View (at CardStack.js:365)
in RCTView (at View.js:112)
in View (at CardStack.js:364)
in CardStack (at CardStackTransitioner.js:97)
in RCTView (at View.js:112)
in View (at Transitioner.js:187)
in Transitioner (at CardStackTransitioner.js:49)
in CardStackTransitioner (at StackNavigator.js:60)
in Unknown (at createNavigator.js:52)
in Navigator (at createNavigationContainer.js:216)
in NavigationContainer (at AppNavigator.js:110)
in Unknown (at App.js:76)
in Provider (at App.js:75)
in App (at renderApplication.js:35)
in RCTView (at View.js:112)
in View (at AppContainer.js:102)
in RCTView (at View.js:112)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
at _class.getComponentProps (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:106142:44)
at _class.renderLine (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:132638:28)
at _class.proxiedMethod (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:25056:30)
at _class.render (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:132731:28)
at _class.proxiedMethod (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:25056:30)
at finishClassComponent (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:4312:96)
at updateClassComponent (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:4305:338)
at beginWork (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:4418:28)
at performUnitOfWork (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:5331:24)
at workLoop (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:5350:125)
at Object._invokeGuardedCallback (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:2491:18)
at invokeGuardedCallback (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:2465:36)
at performWork (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:5386:18)
at scheduleUpdateImpl (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:5507:94)
at scheduleUpdate (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:5495:20)
at Object.enqueueSetState (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:4115:171)
at HomeScreen.Component.setState (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:8078:20)
at HomeScreen._this.formatCandleStickData (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:96925:19)
at HomeScreen._callee3$ (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:96650:23)
at tryCatch (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11082:40)
at Generator.invoke [as _invoke] (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11241:22)
at Generator.prototype.(anonymous function) [as next] (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11118:21)
at tryCatch (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11082:40)
at invoke (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11147:20)
at http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11155:13
at tryCallOne (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:10436:12)
at http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:10522:15
at http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11798:19
at _callTimer (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11692:7)
at _callImmediatesPass (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11728:7)
at Object.callImmediates (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:11932:12)
at MessageQueue.__callImmediates (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:2085:16)
at http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:1963:16
at MessageQueue.__guard (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:2071:9)
at MessageQueue.flushedQueue (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:1962:12)
at MessageQueue.callFunctionReturnFlushedQueue (http://192.168.0.5.xip.io:8081/index.bundle?platform=ios&dev=true&minify=false:1932:19)
at t (file:///Applications/React%20Native%20Debugger.app/Contents/Resources/app.asar/js/RNDebuggerWorker.js:1:14605)

picture danicoolio
👍1

Most helpful comment

@zivchen react-native-svg 5.5.1. It completely works for me. Both dev and production

picture danicoolio on 14 Dec 2017
👍2

All 6 comments

@danieldelouya I'm not able to reproduce this error with the versions you've specified. I'll keep trying.

boygirl picture boygirl on 11 Dec 2017

@boygirl Unfortunately I had to downgrade react-Native-Svg to v5 and victory-native to 0.15.0.
To provoke it I simply reloaded a chart many times (20-30 times) until is suddenly fails.

danicoolio picture danicoolio on 11 Dec 2017
👍1

@danieldelouya which react-native-svg v5 specific version are you using?

zivchen picture zivchen on 14 Dec 2017

@zivchen react-native-svg 5.5.1. It completely works for me. Both dev and production

danicoolio picture danicoolio on 14 Dec 2017
👍2

I'm getting this exact same behavior using victory-native 0.16.1

fourcolors picture fourcolors on 28 Dec 2017

This work around really saved me a lot of time, thanks @danieldelouya

fourcolors picture fourcolors on 28 Dec 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

xkawi picture xkawi  路  4Comments
hwaterke picture hwaterke  路  6Comments
JeremyBradshaw7 picture JeremyBradshaw7  路  4Comments
xinhash picture xinhash  路  4Comments
yvonne6344 picture yvonne6344  路  4Comments