Victory-native: Overflowing VictoryLables are not visible when use VictoryLine

[HristoEftimov]

Bugs and Questions

Checklist

• [ ] This is a victory-native specific issue. (Issues that _also_ appear in victory should be opened here)

• [x] I have read through the FAQ and Guides before asking a question

• [x] I am using the latest version of victory-native

• [x] I have checked to make sure that my versions of react-native and react-native-svg are compatible with this version of victory-native. Read about version requirements

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

Overflowing <VictoryLables /> are not visible for <VictoryLine />, but are visible for the rest of the types.

Reproduction

I am using the latest version of victory-native and react-native-svg. Even I can reproduce the issue on the official documentation:

In this case, the <VictoryLabel /> numbers which overflow the chart are not visible:

<VictoryChart
  theme={VictoryTheme.material}
>
  <VictoryLine
    style={{
      data: { stroke: "#c43a31" },
      parent: { border: "1px solid #ccc"}
    }}
    labels={({ datum }) => datum.y}
    labelComponent={<VictoryLabel style={{ stroke: 'red' }} />}
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 8 },
      { x: 4, y: 4 },
      { x: 5, y: 7 }
    ]}
  />
</VictoryChart>

(the peak value 8 is not vissible, and the edge numbers 2 and 7 are cutted)

While the same case doesn't appear if I use <VictoryBars />:

<VictoryChart
  theme={VictoryTheme.material}
>
  <VictoryBar
    style={{ data: { fill: "#c43a31" } }}
    data={sampleData}
    labels={({ datum }) => datum.y}
    labelComponent={<VictoryLabel style={{ stroke: 'red' }} />}
  />
</VictoryChart>

Description

I have migrated from version 32.0.0 to 34.0.0 and in the previous version, the issue didn't happen :/

[boygirl]

@HristoEftimov by default VictoryLine renders within a clipped component so that its crtain style animation works correctly when loading. Unfortunately this means anything that overflows gets clipped off. You can change the default behavior by setting groupComponent={<G />} on VictoryLine (where G is an svg group tag provided by react-native-svg)