Nested Accordion

[brystfire08]

Hi I am new in React native.

Is it possible to have an accordion inside another accordion using your plugin? Can you give me some clues ? Thanks

Something like this:

var SECTIONS = [
   {
     segmentname: 'First Header',
     segmentcontent: 'Some content here'
  },
  {
     segmentname: 'Second Header',
     segmentcontent: { 
       segmentname: ''First Header inside Second Header",
       segmentcontent: 'Some content here'
   }
  }
];

 _renderHeader(section) {
    return (
      <View>
        <Text>{section.segmentname}</Text>
      </View>
    );
  }

  _renderContent(section) {
    if (typeof section.segmentcontent == "object") {      
      return (
        <View>
            <Accordion
               sections={section.segmentcontent}
               renderHeader={this._renderHeader}
               renderContent={this._renderContent}
            />  
        </View>
      );     
    }
    else{
      return (
        <View>
          <Text>{section.segmentcontent}</Text>
        </View>
      );
    }
  }

 render() {
    return (
    <Accordion
        sections={SECTIONS}
        renderHeader={this._renderHeader}
        renderContent={this._renderContent}
     />
 );
}

[iRoachie]

Hey @brystfire08 sorry for the late reply. This is likely not possible because of how the accordion gets the height for it's children. See https://github.com/oblador/react-native-collapsible/issues/160#issuecomment-376365421.

[brystfire08]

If you have time can I see an example of this where the data source is from an nested object? Got the code from your link [https://snack.expo.io/BkpT9Zhpb] from this issue: https://github.com/oblador/react-native-collapsible/issues/85

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

// or any pure javascript modules available in npm
import Collapsible from 'react-native-collapsible'; // 0.9.0

const OBJ = {
  "1":{
    "segmentname":"samplesegmentname",
    "childsegments":{
      "childsegmentname":"samplechildsegmentname",
    }
  },
  "2":{
    "segmentname":"samplesegmentname2",
    "childsegments":{
      "childsegmentname":"samplechildsegmentname2",
    }
  }

}

function mapObject(object, callback) {
  return Object.keys(object).map(function (key) {
    return callback(key, object[key]);
  });
}

export default class App extends Component {
  state = {
    outerCollapse: true,
    innerCollapse: true,
  };
  render() {
    return (
      <View style={styles.container}>
        {mapObject(OBJ, function (index, value) {
          <View>  
            <Button
              title="Toggle Outer"
              onPress={() =>
                this.setState({ outerCollapse: !this.state.outerCollapse })}
            />
            <Collapsible collapsed={this.state.outerCollapse}>
              <Text style={styles.center}>I'm outer</Text>

              <Button title="Toggle Inner" onPress={() =>
                this.setState({ innerCollapse: !this.state.innerCollapse })}/>

              <Collapsible collapsed={this.state.innerCollapse}>
                <Text style={styles.center}>I'm inner</Text>
              </Collapsible>
            </Collapsible>
          </View> 
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  center: {
    textAlign: 'center'
  }
});

getting error: undefined is not an object (evaluating 'this.state.outerCollapse')

I am gonna try using Just the collapsible cause apparently using the Accordion is not possible

[r3wt]

this really sucks. i wonder how to make it work without the glitching? i mean i have it working, but its really glitchy during the animations

[iRoachie]

@r3wt this issues about nested accordions, whats your glitching related to?

[r3wt]

@iRoachie i was able to nest the accordion, but the opening and closing animations cause screen blinking of the components during animation. the closest i could get is by setting easing to linear and duration to 0, but it still blinks twice.

[iRoachie]

Could you create a new issue with the code you used to produce that? Use snack.expo.io if you can

[NotTooReact89]

@brystfire08 did you manage to figure out your example that you have posted here? I am looking for some help with something similar.

[brystfire08]

@dhanala89 no I have not yet.. for now I settled to a nested list view solution which renders a nested Flatlist but it is not accordion :(

https://github.com/fjmorant/react-native-nested-listview

[r3wt]

looks like my supposed solution was fools gold. once i added content to the views, it now has infinite render. looks like a disco ball of accordions.