How to do an animated collapsible component in react native?

Question

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.

Updated

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) => response.json())
        .then((responseData) =>
          this.setState({
              details:responseData
              })
              );
    }

    showDetailsFunction(){
         let icon = this.icons['down'];

        if(this.state.expanded){
            icon = this.icons['up'];
        }

            return this.state.details.map(detail =>
              <ScrollView>
               {detail.data.curriculum.map(curr =>
              <Animated.View 
                style={[styles.container,{height: this.state.animation}]}>
                {curr.type == 'section'? ( 
                <View onLayout={this._setMinHeight.bind(this)}>
                <Card>
                <CardSection>
                <TouchableHighlight onPress={this.toggle.bind(this)} underlayColor="#f1f1f1">
                <Image style={styles.buttonImage} source={icon}></Image>
                </TouchableHighlight>
                <View style={styles.thumbnailContainerStyle}>
                <Text style={styles.userStyle1}>
                    {curr.title}
                </Text>
                </View>
                </CardSection>
                </Card>
                </View> 
            ): (<Text></Text>)}
            <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
                    {this.props.children}
                        <Text>hiii</Text>
                </View> 

            </Animated.View>
            )}  
        </ScrollView>
            );
    }
    render(){

   return(
   <View>
   {this.showDetailsFunction()}
                </View>
        );
  }

I've done like this and i'm following this doc .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

Answer 1

If you want to use a collapsible component (Accordion) in react-native, there's a package called react-native-accordion .

In order for this component to work, two required props need to be present header and content you can read more about it in the github repo or npm package.

Answer 2

I just recently released exactly such a component. react-native-collapsible-view . check it out!
NPM
Github
Live demo on Snack