title: Collapse Items in React Native
body: <p>I'd like to have some advice on how to make collapsible items in React native. I've tried using : <strong>react-native-collapsible</strong> or even: <strong>react-native-accordion</strong>. But it seems oblador's one doesnt work on this version of React native anymore and the other one is really hard to use or customize. Here's what i wanna do:</p>
  
  <p><a href="https://i.stack.imgur.com/WXN7P.png" rel="noreferrer">What it supposes to look like</a> but
  <a href="https://i.stack.imgur.com/AuK9a.png" rel="noreferrer">ends up being like this after icon pressed</a></p>
  
  <p>I separated my code into 2 files, 1 to custom the view and the other input its title and items.</p>
  
  <p><strong>accordion.js</strong></p>
  
  <pre><code>class AccordionCustom extends Component{
      constructor(props){
          super(props);
  
          this.icons = {
              'up'    : require('../image/keyboard_arrow_right_black_192x192.png'),
              'down'  : require('../image/keyboard_arrow_down_black_192x192.png')
          };
  
          this.state = {
            title: props.title,
            expanded: true,
            animation: new Animated.Value()
          };
      }
  
      toggle(){
          let
          initialValue    = this.state.expanded? this.state.maxHeight + this.state.minHeight : this.state.minHeight,
          finalValue      = this.state.expanded? this.state.minHeight : this.state.maxHeight + this.state.minHeight;
  
         this.setState({
             expanded : !this.state.expanded
         });
  
         this.state.animation.setValue(initialValue);
         Animated.spring(
             this.state.animation,
             {
                 toValue: finalValue
             }
         ).start();
      }
  
      _setMaxHeight(event){
          this.setState({
              maxHeight   : event.nativeEvent.layout.height
          });
      }
  
      _setMinHeight(event){
          this.setState({
              minHeight   : event.nativeEvent.layout.height
          });
      }
  
      render(){
          let icon = this.icons['down'];
  
          if(this.state.expanded){
              icon = this.icons['up'];
          }
  
          return (
            &lt;Animated.View style={[styles.makeup_container,{height: this.state.animation}]}&gt;
              &lt;View style={styles.makeup_layout}
                    onLayout={this._setMinHeight.bind(this)}&gt;
                  &lt;TouchableOpacity style={styles.title_container}&gt;
                    &lt;Text style={styles.makeup_text}&gt;{this.state.title}&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;TouchableHighlight
                     style={styles.icon_container}
                     onPress={this.toggle.bind(this)}
                     underlayColor="#f1f1f1"&gt;
                     &lt;Image
                         style={styles.icon_view}
                         source={icon}
                     &gt;&lt;/Image&gt;
                 &lt;/TouchableHighlight&gt;
              &lt;/View&gt;
              &lt;View style={styles.children_container}
                    onLayout={this._setMaxHeight.bind(this)}&gt;
                  {this.props.children}
              &lt;/View&gt;
            &lt;/Animated.View&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>home.js</strong> </p>
  
  <pre><code>&lt;View style={styles.accordion_container}&gt;
                    &lt;AccordionCustom title="Trang Điểm"
                                     style={styles.accordion_padding}&gt;
                      &lt;View style={{flex: 1, flexDirection: 'column'}}&gt;
                        &lt;TouchableOpacity style={styles.accordion_comp}&gt;&lt;Text style={styles.makeupComp_text}&gt;Sản Phẩm Cho Mắt&lt;/Text&gt;&lt;/TouchableOpacity&gt;
                        &lt;TouchableOpacity style={styles.accordion_comp}&gt;&lt;Text style={styles.makeupComp_text}&gt;Sản Phẩm Cho Mặt&lt;/Text&gt;&lt;/TouchableOpacity&gt;
                        &lt;TouchableOpacity style={styles.accordion_comp}&gt;&lt;Text style={styles.makeupComp_text}&gt;Sản Phẩm Cho Môi&lt;/Text&gt;&lt;/TouchableOpacity&gt;
                        &lt;TouchableOpacity style={styles.accordion_comp}&gt;&lt;Text style={styles.makeupComp_text}&gt;Sản Phẩm Cho Móng&lt;/Text&gt;&lt;/TouchableOpacity&gt;
                        &lt;TouchableOpacity style={styles.accordion_comp}&gt;&lt;Text style={styles.makeupComp_text}&gt;Cọ Và Dụng Cụ Khác&lt;/Text&gt;&lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
                    &lt;/AccordionCustom&gt;
                  &lt;/View&gt;
  </code></pre>
  
  <p>Please suggest one of your library or anyway to correct my code.</p>