react-native-pie
react-native-pie copied to clipboard
duplicate key
Looks like artGroup using I for key and for each item on pie have a duplicate key
ExceptionsManager.js:126 Warning: Encountered two children with the same key, `3`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in ARTGroup (at Group.js:35)
in Group (at Pie.js:129)
in RoundDividers (at Pie.js:178)
in ARTGroup (at Group.js:35)
in Group (at Pie.js:169)
in ARTSurfaceView (at Surface.js:37)
in Surface (at Pie.js:168)
in Pie (at ModaBuyingPower.tsx:105)
in RCTView (at ModaBuyingPower.tsx:104)
in RCTSafeAreaView (at SafeAreaView.js:55)
in SafeAreaView (at ModaBuyingPower.tsx:98)
in RCTView (at Paper.tsx:58)
in Paper (created by Context.Consumer)
I hope this helps you still but I had the same problem and I could fix it with a workaround.
Just go to Pie.js
and find RoundDividers
function and then the following part of the code:
if (paintedSections.length > 1 && visible) {
paintedSections.forEach((section, index) => {
const {color, startAngle} = section;
for (let i = 0; i < dividerSize + 2; i++) {
dividerArray.push(
<ArcShape
key={index} // ===> Should be replaced with something unique. I had replaced it with `'DA'+index+i.toString()`
dimensions={dimensions}
color={backgroundColor}
startAngle={
startAngle + section.arcAngle + dividerSize + i - dividerOffSet
}
arcAngle={1}
isBezian={isBezian}
strokeCap={strokeCap}
/>,
);
dividerColorOverlayArray.push(
<ArcShape
key={index} // ===> Should be replaced with something unique. I had replaced it with `'DCOA'+index+i.toString()`
dimensions={dimensions}
color={color}
startAngle={
startAngle + section.arcAngle - dividerSize + i - dividerOffSet
}
arcAngle={1}
isBezian={isBezian}
strokeCap={strokeCap}
/>,
);
}
});
}
As you can see in the warnings, those key
s aren't unique, and you should replace them with unique keys.
I wrote my personal workaround in the above code snippet.