Accordion titles are not rendered

[Kolyunya]

I have gone through these following points

• Check latest documentation: https://docs.nativebase.io/
• Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

» node_modules/.bin/react-native info
info Fetching system and libraries information...
System:
    OS: Linux 5.10 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7600 CPU @ 3.50GHz
    Memory: 15.17 GB / 23.43 GB
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 15.7.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.11 - /usr/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 10.0.2 - /usr/bin/javac
    Python: 3.9.1 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.0 => 17.0.1 
    react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2 
    native-base: ^2.15.2 => 2.15.2
  npmGlobalPackages:
    *react-native*: Not Found

Expected behaviour

Accordion title is rendered.

Actual behaviour

Accordion title is not rendered.

Steps to reproduce

Expo.io demo snack.

1. Add an Accordion component.
2. See that titles are not rendered.

Is the bug present in both iOS and Android or in any one of them?

The bug is present on both platforms.

Any other additional info which would help us debug the issue quicker.

The component docs are also broken: the expanded prop expects an array, not a number. So, maybe it's the problem with the docs and the property is expected to be called something else instead of title.

Screenshots

[mikealeonetti]

Docs are indeed broken. Without this issue I would never have figured out that the expanded property takes an array.

Note that you can get around this issue by using the renderHeader property found in the docs: https://docs.nativebase.io/Components.html#accordion-def-headref

Even using the example renderHeader will work. From the docs:

import React, { Component } from "react";
import { Container, Header, Content, Icon, Accordion, Text, View } 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 AccordionCustomHeaderContent extends Component {
  _renderHeader(item, expanded) {
    return (
      <View style={{
        flexDirection: "row",
        padding: 10,
        justifyContent: "space-between",
        alignItems: "center" ,
        backgroundColor: "#A9DAD6" }}>
      <Text style={{ fontWeight: "600" }}>
          {" "}{item.title}
        </Text>
        {expanded
          ? <Icon style={{ fontSize: 18 }} name="remove-circle" />
          : <Icon style={{ fontSize: 18 }} name="add-circle" />}
      </View>
    );
  }
  _renderContent(item) {
    return (
      <Text
        style={{
          backgroundColor: "#e3f1f1",
          padding: 10,
          fontStyle: "italic",
        }}
      >
        {item.content}
      </Text>
    );
  }
  render() {
    return (
      <Container>
        <Header />
        <Content padder style={{ backgroundColor: "white" }}>
          <Accordion
            dataArray={dataArray}
            animation={true}
            expanded={true}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
          />
        </Content>
      </Container>
    );
  }
}
<br/>

[Kolyunya]

@mikealeonetti thanks for a temporary workaround! It worked for me!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[surajahmed]

Accordion Component is not fully supported yet. We're working on API and accessibility of this component. Moving this issue to the discussion.