Version: 3.0.0-next.36


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


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 (
<Header />
<Content padder>
<Accordion dataArray={dataArray} expanded={0} />