Feature: nested accordion

[goldylucks]

I already got the code for this working. do U want a PR? :)

basically, this is the implementation:

export default class AccordionNav extends Component {

  static propTypes = {
    data: PropTypes.array.isRequired,
  }

  render () {
    return (
      <View style={ styles.container }>
        { this.props.data.map(this.renderRecursion) }
      </View>
    )
  }

  renderRecursion = ({ children, title }) => {
    if (!children) {
      return (
        <Text key={ title }>{ title }</Text>
      )
    }
    return (
      <Accordion
        header={ <Text>{ title }</Text> }
        content={
          <View>
            { children.map(this.renderRecursion) }
          </View>
        }
        easing='easeOutCubic'
        key={ title }
      />
    )
  }

}

[BTMouseKing]

@goldylucks thanks for sharing this, i got a problem when trying your implementation, basically the parent content height doesn't change when the child expands so you are not able to see all the children of the child. Here is the code and result:

Note: I have added overflow: 'scroll' after line 111 in ./node_modules/react-native-accordion/src/index.js so the accordion is able to expand.

Below is the code:

import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native';

import Accordion from 'react-native-accordion';

class Test1 extends Component {
    render() {
        let data = [
            {
                "title": "Parent Task",
                children: [
                    {
                        "title": "Sub Task 1",
                        children: [
                            {
                                "title": "Sub Task 1-1"
                            }
                        ]
                    },
                    {
                        "title": "Sub Task 2",
                        children: [
                            {
                                "title": "Sub Task 2-1"
                            }
                        ]
                    }
                ]
            }
        ];

        return (
            <View style={{ margin: 80 }}>
                { data.map(this.renderRecursion) }
            </View>
        )
    }

    renderRecursion = ({ children, title }) => {
        if (!children) {
            return (
                <Text key={ title }>{ title }</Text>
            )
        }
        return (
            <Accordion
                header={ <Text>{ title }</Text> }
                content={
                    <View>
                        { children.map(this.renderRecursion) }
                    </View>
                }
                easing='easeOutCubic'
                key={ title }
            />
        )
    }
}

module.exports = Test1;

Here is the result:

1) When select the parent task, it shows two subtasks, which is correct:

2) However, when you select "Sub Task 1" or "Sub Task 2", it's not showing correctly:

"Sub Task 2" disappear when "Sub Task 1-1" shows. "Sub Task 2-1" is not able to show.

I think it's because the parent content height remains the same, which only displays two children.

How to fix this?

[goldylucks]

I needed some more features so I ended up writing a new accordion form scratch.

ATM it's coupled with my app for faster iterations. I believe in a week or so, after I launch the app, I'll export it as a standalone package, and I'll link it here.

Hopefully it will help :)

afterwards we can discuss together if we keep two separate implementations, or incorporate the new features from my implementation to yours.

[BTMouseKing]

Cool, looking forward. I found the LayoutAnimation can be actually used to easily implement the nested accordion, with a state flag "expanded", the LayoutAnimation will manage the content height for you, so i didn't use any accordion plugin. The example reference is here: http://moduscreate.com/expanding-and-collapsing-elements-using-animations-in-react-native/

[aanchal123mohane]

plz can u share demo of nested expandable view with me.

[goldylucks]

I no longer developing this, closing. From what I remember, the code I posted above works "as is", tho it was a long time ago, maybe there was more to it.