Make animated collapsible card component, with initial props to show or hide

Question

Background

Using React Native I was able to make collapsible card component. On Icon click the card slides up hiding its content, or expands showing

Answer 1

// With hooks for rn


import React, { useState, useEffect } from 'react'
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet
  } from 'react-native'
  import styles from '../../assets/styles' 
  const usePanelExpanding = (props) => {


    let icons = {
        'up': require('../../images/formicons/icons/close.png'),
        'down': require('../../images/formicons/icons/disclosure.png')
      }

      const [expanded, setExpanded] = useState(false);
      const [iconShow, setIconShow] = useState('up');
      const [textSwap, setTextSwap] = useState('Show more...');


      useEffect(
        () => {
          expanded ? setIconShow('up') : setIconShow('down')
          expanded ? setTextSwap('Show less') : setTextSwap('Show more ...')
        },
        [expanded]
      );

      const toggle = () =>{
        setExpanded(!expanded)
      }

      const panel = (
        
            
                
            
        
        {expanded && 
            {props}
        
      }
      )
      return {
        panel,
        toggle
      }
  }
  export default usePanelExpanding


// How to use it from a parent function

 const expandingBioObject = usePanelExpanding({profile.bio})

      {expandingBioObject.panel}