Victory-native: tickLabelComponent causes RangeError: Maximum call stack size exceeded

[levsero]

After updating react native from 48.4 to 49.3 passing in a VictoryLabel to tickLabelComponent on a VictoryAxis now causes a crash.

"react-native-svg": "5.4.2",
"victory-native": "0.14.0"/ "0.15.0"

Minimal code to reproduce the error:

<VictoryChart>
    <VictoryAxis tickLabelComponent={<VictoryLabel />} />
</VictoryChart>

[xavierlefevre]

Not only with tickLabelComponent unfortunately :

My graph is quite complex, did not try yet to see which setting/prop/usage could produce this, but we don't use tickLabelComponent.

[tommcgurl]

+1 I'm seeing the same issue with the tickLabelComponent on a VictoryAxis

[zivchen]

Happens to me to.
For me its VictoryScatter graph with custom dataComponent.
if i remove the dataComponent its OK

Start to happen when i upgraded to 49.5

[chkchk]

It happens when I used VictoryBar, add this line solved my issue:

animate={{duration: 0, onLoad: {duration: 0}}}

[tommcgurl]

Ya @zivchen I was seeing the same thing. Once I removed the dataComponent prop it worked fine. I'll try what @chkchk suggested but I wonder what happens if we require an animation.

[zivchen]

@chkchk thanks for the rescue!!! it worked.
@tommcgurl - i can do with out animation at the moment, its better then crashing anyway, hope you can do with out too.

[boygirl]

@levsero @xavierlefevre @tommcgurl @zivchen

I'm not able to reproduce this issue in the latest version (~0.16.0). I'm going to close this issue, but let me know if the problem persists.

[lukerayman]

I just updated React-Native to 0.49.3 (by updating Expo to 22) and this crash is now a thing in my project. I have updated victory-native to 0.16.6, but it didn't solve the problem. However, the hack with animation from @chkchk works.

Anyways, this problem has not been fixed.

[jzhw0130]

@boygirl

The problem exists on the latest version:
"victory-native": "^0.16.6"
"react-native-svg": "^6.1.3".

Do not set the tickLabelComponent, everything is ok

<VictoryAxis dependentAxis
                    domain={updateDomain.y}
                    tickValues={yValues}
                    orientation='left'
                    standalone={false}
                    style={styles.axisY}
                    // tickLabelComponent={<AxisLabel />}
                />

function AxisLabel(props) {
    return <VictoryLabel {...props} />
}

Attention: not exist the first time, the problem exists for the third time.