usepieslice context must be used within a pieselice provider

[mMarcos208]

After upgrade to 41.4.0 and use label for pie chart, for example, show me the error usepieslice context must be used within a pieselice provider

            <View
              style={{
                height: '45%',
              }}
            >
              <PolarChart data={data} colorKey="color" valueKey="value" labelKey="label">
                <Pie.Chart>
                  {({slice}) => {
                    return (
                      <>
                        <Pie.Slice>
                          <Pie.Label radiusOffset={0.6}>
                            {(position) => (
                              <PieChartCustomLabel
                                position={position}
                                slice={slice}
                                font={InterRegularFont}
                              />
                            )}
                          </Pie.Label>
                        </Pie.Slice>

                        <Pie.SliceAngularInset
                          angularInset={{
                            angularStrokeWidth: 1,
                            angularStrokeColor: colors.white,
                          }}
                        />
                      </>
                    )
                  }}
                </Pie.Chart>
              </PolarChart>

[carbonrobot]

cc @mwritter

[mwritter]

After upgrade to 41.4.0 and use label for pie chart, for example, show me the error usepieslice context must be used within a pieselice provider

            <View
              style={{
                height: '45%',
              }}
            >
              <PolarChart data={data} colorKey="color" valueKey="value" labelKey="label">
                <Pie.Chart>
                  {({slice}) => {
                    return (
                      <>
                        <Pie.Slice>
                          <Pie.Label radiusOffset={0.6}>
                            {(position) => (
                              <PieChartCustomLabel
                                position={position}
                                slice={slice}
                                font={InterRegularFont}
                              />
                            )}
                          </Pie.Label>
                        </Pie.Slice>

                        <Pie.SliceAngularInset
                          angularInset={{
                            angularStrokeWidth: 1,
                            angularStrokeColor: colors.white,
                          }}
                        />
                      </>
                    )
                  }}
                </Pie.Chart>
              </PolarChart>

@mMarcos208 - this looks very similar to the /example/app/pie-chart.tsx, and Im not seeing any errors when running the example app from the repo.

When using the <Pie.Chart /> component the slices are wrapped in a PieSliceProvider, and the <Pie.Label /> component reaches out to that provider to get the slice information so that you do not have to pass the slice information. 🤔 Im not exactly sure why you are seeing this error.

If you remove the <Pie.Label /> do you still get this error?

[zibs]

You might be seeing this error if you are using the Pie.Label or PieChartCustomLabel anywhere outside of the Pie.Chart. You might need to check the rest of your code to make sure you're not doing so!