Error: Detected multiple renderers concurrently rendering the same context provider in PolarChart

[devAbreu]

Question

I am experiencing an issue when using the PolarChart component from victory-native. The app crashes with the following error:

 (NOBRIDGE) ERROR  Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
    in PolarChartProvider (created by PolarChart)
    in PolarChart (created by Dashboard)
    in RCTView (created by View)
    in View (created by ScrollView)
    in RCTScrollView
    in VScrollViewNativeComponent (created by ScrollView)
    in ScrollView (created by ScrollView)
    in Wrapper (created by Dashboard)
    in Dashboard (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabNavigator)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Animated(View))
    in Animated(View) (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RCTView (created by View)
    in View (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by RootLayout)
    in ThemeProvider (created by PaperProvider)
    in RCTView (created by View)
    in View (created by Portal.Host)
    in Portal.Host (created by PaperProvider)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by PaperProvider)
    in PaperProvider (created by RootLayout)
    in RootLayout
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in ThemeProvider
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

Background Info/Attempts

Context

I am integrating PolarChart in a React Native expo app with the following setup:

• React Native: 0.76.3
• Victory Native: 41.12.0
• React: 18.3.1
• Expo: 52.0.11
  The error suggests there are multiple context providers being rendered. However, I am not explicitly wrapping PolarChart with a provider anywhere.

Here’s a minimal example of my code:

import React, { useMemo } from "react";
import { View, StyleSheet } from "react-native";
import { PolarChart, Pie } from "victory-native";

export default function Dashboard() {
  const data = useMemo(() => [
    { value: 300, label: "Electronics", color: "#4DA674" },
    { value: 150, label: "Clothing", color: "#C1E6BA" },
    { value: 50, label: "Books", color: "#EAF8E7" },
    { value: 100, label: "Other", color: "#023336" },
  ], []);

  return (
    <View style={styles.container}>
      <PolarChart
        data={data}
        valueKey="value"
        labelKey="label"
        colorKey="color"
      >
        <Pie.Chart innerRadius="50%">
          {({ slice }) => (
            <Pie.Slice>
              <Pie.Label text={slice.label} />
            </Pie.Slice>
          )}
        </Pie.Chart>
      </PolarChart>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
});

Observations

• I am not wrapping PolarChart in any custom provider, nor am I duplicating it elsewhere.
• The issue occurs consistently when navigating to the screen containing PolarChart.

Expected Behavior

PolarChart should render normally without throwing context-related errors.

Additional Details

• Does Victory require any specific configuration when used with React Native expo?

[rainerllera]

+1 Having the same issue.
For context I've migrated from Expo SDK 51 to 52, and enabled new arch. Started getting these errors after the upgrade. Only with PolarChart. Have been also getting reanimated warnings on other chart types render, but there's another issue already created for that.

[zibs]

I'll take a look at this, thanks.

[zibs]

Alright, sorry @rainerllera and @devAbreu, I think the issue lies somewhere higher up in Skia for now: Shopify/react-native-skia#2777. I've made an issue and will monitor.

The code is currently following what the Skia docs themselves recommend, but that seems to no longer work at the moment: https://shopify.github.io/react-native-skia/docs/canvas/contexts

[rainerllera]

I see, thanks for having a look @zibs!

[devAbreu]

Thank you for take the time to look into this @zibs ✅