Version: 3.0.0-next.38

Accordion

We have sliced Accordion into multiple smaller component which not only provides more control over the the code but also makes it more readable.

Overview#

Migrating Checkbox components can broadly described in these points:

  • dataArray is depreciated.
  • expandeddefaultIndex, and now accepts array of index.
  • Pros like headerStyle, contentStyle, icon, expandedIcon, iconStyle, expandedIconStyle, renderHeader, renderContent are no longer required as components like Accordion.Button, Accordion.Panel, Accordion.Icon replaces them.
  • onAccordionOpen, onAccordionOpenonChange, one callback instead of 2.

Code Comparison#

import React, { Component } from 'react';
import { Container, Header, Content, Accordion } from 'native-base';
const dataArray = [
{
title: 'First Element',
content: 'Lorem ipsum dolor sit amet',
},
{ title: 'Second Element', content: 'Lorem ipsum dolor sit amet' },
{
title: 'Third Element',
content: 'Lorem ipsum dolor sit amet',
},
];
export default class AccordionExample extends Component {
render() {
return (
<Container>
<Header />
<Content padder>
<Accordion dataArray={dataArray} expanded={0} />
</Content>
</Container>
);
}
}