So in my React Native app for Android, I have an Accordion
from Native Base
that is nested inside another Accordion
:
imports ...
type Props = {};
const AccordionOne: React.FC<Props> = props => {
const renderContentGeneral = () => {
return (
<View>
<ChildAccordionComponentOne
listKey={'childOne'}
titleHeader="ChildAccordion 1"></ChildAccordionComponentOne>
<ChildAccordionComponentTwo listKey={'childTwo'} titleHeader="ChildAccordion 2"></ChildAccordionComponentTwo >
</View>
);
};
const dataArray = [
{
title: 'GENERAL',
content: renderContentGeneral(),
},
];
return (
<Accordion
dataArray={dataArray}
/>
);
};
export default AccordionOne;
ChildAccordionComponentTwo
returns an Accordion
. When I give this Accordion
a listKey
property for React, then it gives the error that property "listkey" does not exist on accordion
, because Native Base does not provide this property for Accordion
.
But if I leave this out, React complains "A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list."
imports ...
type Props = {
titleHeader: string;
};
const ChildAccordionComponentTwo: React.FC<Props> = ({titleHeader}) => {
const renderContainer = () => {
return <View></View>;
};
const dataArray = [
{
content: renderContainer(),
},
];
const renderHeader = (expanded: boolean) => {
return <Header title={titleHeader} expanded={expanded} />;
};
const renderContent = () => {
return <Slider></Slider>;
};
return (
<Accordion
listKey={'acc'} // here is the problem
dataArray={dataArray}
renderContent={renderContent}
renderHeader={renderHeader}
/>
);
};
export default ChildAccordionComponentTwo ;
I tried to wrap the Accordion
inside a View
and give it a prop listKey
, but doesn't work. I really have no idea what to do here. Does anybody have an idea?