Animating the Accordion in React Native

ReactNativeAccordion.tsx

import {LucideChevronDown, LucideChevronUp} from 'lucide-react-native';
import React, {useCallback, useImperativeHandle, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  LayoutAnimation,
  Platform,
  UIManager,
  TouchableWithoutFeedback,
} from 'react-native';

if (
  Platform.OS === 'android' &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

type Props = {
  title: string;
  children: React.ReactNode;
};

export const Accordion = React.forwardRef((props: Props, ref) => {
  const {title, children} = props;
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = useCallback(() => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setIsOpen(!isOpen);
  }, [isOpen]);

  useImperativeHandle(
    ref,
    () => ({
      open: () => {
        if (isOpen) {
          return;
        }
        return toggleOpen();
      },
    }),
    [toggleOpen, isOpen],
  );

  return (
    <View style={styles.accordionSection}>
      <TouchableWithoutFeedback
        onPress={toggleOpen}
        accessibilityRole="button"
        accessibilityLabel="Toggle Accordion">
        <View
          style={[
            styles.accordionTitle,
            {flexDirection: 'row', justifyContent: 'space-between'},
          ]}>
          <Text style={styles.accordionHeader}>{title}</Text>
          {isOpen ? (
            <LucideChevronUp color="black" />
          ) : (
            <LucideChevronDown color="black" />
          )}
        </View>
      </TouchableWithoutFeedback>
      <Animated.View style={[styles.accordionContent]}>
        {isOpen && <View>{children}</View>}
      </Animated.View>
    </View>
  );
});

const styles = StyleSheet.create({
  accordionSection: {
    marginBottom: 16,
  },
  accordionTitle: {
    padding: 10,
    backgroundColor: '#f0f0f0',
  },
  accordionContent: {
    overflow: 'hidden',
    backgroundColor: '#E0E0E0',
  },
  accordionHeader: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});