import { ReactNode } from "react"; import { StyleSheet, TouchableWithoutFeedback, View } from "react-native"; import LinearGradient from "react-native-linear-gradient"; import Animated from "react-native-reanimated"; import { useIOTheme } from "../../context"; import { IOAccordionRadius, type IOSpacingScale } from "../../core"; import { IOColors, hexToRgba } from "../../core/IOColors"; import { useAccordionAnimation } from "../../hooks/useAccordionAnimation"; import { IOIconSizeScale, IOIcons, Icon } from "../icons/Icon"; import { Body, H6 } from "../typography"; export type AccordionItem = { title: string; body: string | ReactNode; accessibilityLabel?: string; icon?: IOIcons; }; const accordionBodySpacing: IOSpacingScale = 16; const accordionIconMargin: IOSpacingScale = 12; const accordionChevronMargin: IOSpacingScale = 8; // Icon size const iconSize: IOIconSizeScale = 24; export const AccordionItem = ({ title, accessibilityLabel, body, icon }: AccordionItem) => { const theme = useIOTheme(); const { expanded, toggleAccordion, onBodyLayout, iconAnimatedStyle, bodyAnimatedStyle, bodyInnerStyle } = useAccordionAnimation(); // Visual attributes const accordionBackground: IOColors = theme["appBackground-primary"]; const accordionBorder: IOColors = theme["cardBorder-default"]; const accordionIconColor: IOColors = theme["icon-decorative"]; return ( {icon && ( )}

{title}

{typeof body === "string" ? {body} : body} {/* This gradient adds a smooth end to the content. If it is missing, the content will be cut sharply during the height transition. */} ); }; const styles = StyleSheet.create({ accordionWrapper: { borderWidth: 1, borderRadius: IOAccordionRadius, borderCurve: "continuous" }, textContainer: { padding: accordionBodySpacing, flexDirection: "row", alignItems: "center", justifyContent: "space-between" } });