Dead simple React Native Expandable View (RNUILIB & ICONIFY)

gistfile1.txt

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

export default function ExpandableView(props) {
  const title = props.title || 'Expandable View'
  const defaultExpanded = props.defaultExpanded || false
  const divider = props.divider || false

  const [expanded, setExpanded] = useState(defaultExpanded || false)

  const renderIcon = () => {
    if (expanded) {
      return (
        <Iconify
          icon='fluent:chevron-up-12-filled'
          size={25}
          color={Colors.$iconPrimary}
        />
      )
    } else {
      return (
        <Iconify
          icon='fluent:chevron-down-12-filled'
          size={25}
          color={Colors.$iconPrimary}
        />
      )
    }
  }

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

  return (
    <View flex>
      {/* Title */}
      <TouchableOpacity onPress={handleToggleExpand}>
        <View
          row
          justifyContent={'space-between'}
        >
          <View>
            <Text
              text60BO
              grey20
            >
              {title}
            </Text>
          </View>

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

      {/* Divider */}
      {divider && (
        <View
          marginT-10
          style={{
            borderBottomWidth: 1,
            borderBottomColor: Colors.grey50
          }}
        />
      )}

      {/* Children */}
      {expanded && props.children}
    </View>
  )
}