Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6211

Nativebase: property "listkey" does not exist on accordion

$
0
0

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?


Viewing all articles
Browse latest Browse all 6211

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>