y.ticks is not a function

I use YAxis as code:

 <View style={{ flexDirection: 'row', height: 200, paddingVertical: 16 }}>
                <YAxis
                    data={data}
                    yAccessor={({ index }) => index}
                    scale={scale.scaleBand}
                    contentInset={{ top: 10, bottom: 10 }}
                    spacing={0.2}
                    formatLabel={(_, index) => data[ index ].label}
                />
                <BarChart
                    style={{ flex: 1, marginLeft: 8 }}
                    data={data}
                    horizontal={true}
                    yAccessor={({ item }) => item.value}
                    svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
                    contentInset={{ top: 10, bottom: 10 }}
                    spacing={0.2}
                    gridMin={0}
                >
                    <Grid direction={Grid.Direction.VERTICAL}/>
                </BarChart>
            </View>

But, it had error: y.ticks is not a function(In ‘y.ticks(numberOfTicks)’, ‘y.ticks’ is undefined

[jbernhardt23]

I’m having the same issue and it seems that the problem is in the way that YAxis is doing comparisons between the scale prop being passed to the component and the scale.scaleBrand used from the d3-scale dependency used in the library.

This particular ternary operation const ticks = scale === d3Scale.scaleBand ? values : y.ticks(numberOfTicks); is returning false if you passed a scale.scaleBran from another d3-scale version.

To fix this, use the same d3-scale version from the library which is 1.0.6.

[smubarak-ali]

I am facing the same exact problem 😦