Victory Charts cuts off tick labels when angled - react-native

Question

(Edit: I also tried putting overflow: 'visible' in various locations to no avail.)
I'm using a date for the x-axis tick labels so I would like them to be at an angle to prevent overlap. The issue is that they are not being cut off at the bottom, as seen here (the colors are there to show different component edges):
Here is my code:
<View style={{ backgroundColor: 'red', paddingBottom: 50 }}>
<VictoryChart
theme={chartTheme}
width={screenWidth - 10}
animate={{
onLoad: { duration: 100 },
duration: 500,
}}
containerComponent={<VictoryContainer style={{ backgroundColor: 'blue', paddingBottom: 50 }} />} >
<VictoryAxis
label={plotText.xLabel}
style={{ // adding padding here does nothing
tickLabels: { angle: -45, textAnchor: 'end' } // adding padding here does nothing
}}
tickValues={dispRSHistData.ticks}
tickFormat={(t) => getFormattedDate(t)}
/>
<VictoryAxis
dependentAxis
label={plotText.yLabel} />
<VictoryLine
data={dispRSHistData.data}
x="timestamp"
y="percentSuccess"
style={{ data: { stroke: "tomato" } }}
size={10} />
</VictoryChart>
</View>
I've tried setting various heights manually but nothing seems to give space to show the full tick labels.

Answer 1

I didnt find an automatic solution to your problem
but mannualy adding "padding" prop to the chart worked for me
btw this solution is for VictoryNative on react native but I guess something similar works on react.js version too
check the 'padding' prop here
<VictoryChart width={400} theme={VictoryTheme.material}
padding={{bottom:100,right:50,left:50}}
>
<VictoryAxis //the x axis
// axisLabelComponent={<VictoryLabel angle={-90}/>}
tickLabelComponent={<VictoryLabel angle={-90} dy={-7}
textAnchor='end'
// labelPlacement="perpendicular"
/>}
/>
<VictoryAxis dependentAxis //the y axis
/>