Collapse items in React Native

Question

I would like to get some tips on how to make folding elements in React native. I tried to use: react-native-folding or even: react-native-accordion . But it seems that one owner is not working on this version of React native, and the other is really difficult to use or configure. Here is what I want to do:

What it looks like to look like , but after clicking the icon

I split my code into 2 files: one for customizing the view, and another for entering the title and elements.

accordion.js

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 (
          <Animated.View style={[styles.makeup_container,{height: this.state.animation}]}>
            <View style={styles.makeup_layout}
                  onLayout={this._setMinHeight.bind(this)}>
                <TouchableOpacity style={styles.title_container}>
                  <Text style={styles.makeup_text}>{this.state.title}</Text>
                </TouchableOpacity>
                <TouchableHighlight
                   style={styles.icon_container}
                   onPress={this.toggle.bind(this)}
                   underlayColor="#f1f1f1">
                   <Image
                       style={styles.icon_view}
                       source={icon}
                   ></Image>
               </TouchableHighlight>
            </View>
            <View style={styles.children_container}
                  onLayout={this._setMaxHeight.bind(this)}>
                {this.props.children}
            </View>
          </Animated.View>
        );
    }
}

home.js

<View style={styles.accordion_container}>
                  <AccordionCustom title="Trang Điểm"
                                   style={styles.accordion_padding}>
                    <View style={{flex: 1, flexDirection: 'column'}}>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Sản Phẩm Cho Mắt</Text></TouchableOpacity>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Sản Phẩm Cho Mặt</Text></TouchableOpacity>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Sản Phẩm Cho Môi</Text></TouchableOpacity>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Sản Phẩm Cho Móng</Text></TouchableOpacity>
                      <TouchableOpacity style={styles.accordion_comp}><Text style={styles.makeupComp_text}>Cọ Và Dụng Cụ Khác</Text></TouchableOpacity>
                    </View>
                  </AccordionCustom>
                </View>

Please suggest one of your libraries or in any case correct my code.

Answer 1

Native base .

https://docs.nativebase.io/Components.html#accordion-def-headref

: