title: How to do an animated collapsible component in react native?
body: <p>Hi everyone how to make a custom animated collapsible component in react native? Tried several docs but not working.Can anybody please provide a helpful doc.Please do help.</p>
  
  <p><strong>Updated</strong></p>
  
  <pre><code>constructor(props){
          super(props);
  
          this.icons = {
              'up'    : require('../Images/Arrowhead.png'),
              'down'  : require('../Images/Arrowhead-Down.png')
          };
  
          this.state = {
              title       : props.title,
              expanded    : false,
              animation   : new Animated.Value(),
              details: []
          };
      }
       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
          });
      }
  
      componentWillMount(){
          fetch('https://www.mywebsite.com' )
          .then((response) =&gt; response.json())
          .then((responseData) =&gt;
            this.setState({
                details:responseData
                })
                );
      }
  
      showDetailsFunction(){
           let icon = this.icons['down'];
  
          if(this.state.expanded){
              icon = this.icons['up'];
          }
  
              return this.state.details.map(detail =&gt;
                &lt;ScrollView&gt;
                 {detail.data.curriculum.map(curr =&gt;
                &lt;Animated.View 
                  style={[styles.container,{height: this.state.animation}]}&gt;
                  {curr.type == 'section'? ( 
                  &lt;View onLayout={this._setMinHeight.bind(this)}&gt;
                  &lt;Card&gt;
                  &lt;CardSection&gt;
                  &lt;TouchableHighlight onPress={this.toggle.bind(this)} underlayColor="#f1f1f1"&gt;
                  &lt;Image style={styles.buttonImage} source={icon}&gt;&lt;/Image&gt;
                  &lt;/TouchableHighlight&gt;
                  &lt;View style={styles.thumbnailContainerStyle}&gt;
                  &lt;Text style={styles.userStyle1}&gt;
                      {curr.title}
                  &lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;/CardSection&gt;
                  &lt;/Card&gt;
                  &lt;/View&gt; 
              ): (&lt;Text&gt;&lt;/Text&gt;)}
              &lt;View style={styles.body} onLayout={this._setMaxHeight.bind(this)}&gt;
                      {this.props.children}
                          &lt;Text&gt;hiii&lt;/Text&gt;
                  &lt;/View&gt; 
  
              &lt;/Animated.View&gt;
              )}  
          &lt;/ScrollView&gt;
              );
      }
      render(){
  
     return(
     &lt;View&gt;
     {this.showDetailsFunction()}
                  &lt;/View&gt;
          );
    }
  </code></pre>
  
  <p>I've done like this and <a href="https://moduscreate.com/blog/expanding-and-collapsing-elements-using-animations-in-react-native/" rel="nofollow noreferrer"> i'm following this doc</a>.The problem i'm facing is single onclick affect all the collapse component. Also the size of the card is just increasing without expanding or showing the text.Like the following </p>
  
  <p><a href="https://i.stack.imgur.com/QE1f3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QE1f3.png" alt="Before clicking the icon"></a>
  <a href="https://i.stack.imgur.com/1XNhT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1XNhT.png" alt="After clicking "></a></p>