Dead Simple React Native Collapsible Card (RNUILIB & Iconify)

gistfile1.txt

import { useState } from 'react'
import { Iconify } from 'react-native-iconify'
import { Card, Text, TouchableOpacity, View } from 'react-native-ui-lib'

export default function CollapsibleCard(props) {
  const defaultExpanded = props.defaultExpanded || false
  const title = props.title || 'Title'

  const [expanded, setExpanded] = useState(defaultExpanded)

  const renderIcon = () => {
    if (expanded) {
      return <Iconify icon='fluent:chevron-up-16-regular' />
    } else {
      return <Iconify icon='fluent:chevron-down-16-regular' />
    }
  }

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

  return (
    <TouchableOpacity onPress={handleToggleExpanded}>
      <Card>
        <View
          row
          spread
          style={{
            paddingTop: 10,
            paddingHorizontal: 10,
            paddingBottom: expanded ? 0 : 10
          }}
        >
          <View>
            <Text text80BO>{title}</Text>
          </View>

          <View>{renderIcon()}</View>
        </View>

        {expanded && <View padding-10>{props.children}</View>}
      </Card>
    </TouchableOpacity>
  )
}