A simple accordion example built with Reanimated 2 Layout Animations

AccordionExample.tsx

import React, {ReactNode, useState} from 'react'
import {Pressable, StyleSheet, Text, View} from 'react-native'
import {ScrollView} from 'react-native-gesture-handler'
import Animated, {
  Easing,
  FadeIn,
  FadeOut,
  Layout,
} from 'react-native-reanimated'

const AnimatedPressable = Animated.createAnimatedComponent(Pressable)

function AccordionItem({
  title,
  children,
}: {
  title: string
  children: ReactNode
}) {
  const [expanded, setExpanded] = useState(false)
  return (
    <AnimatedPressable
      onPress={() => setExpanded(!expanded)}
      style={styles.accordionPressable}
      layout={Layout.duration(240).easing(Easing.inOut(Easing.ease))}>
      <>
        <Text style={styles.title}>{title}</Text>
        {expanded && (
          <Animated.View entering={FadeIn} exiting={FadeOut.duration(500)}>
            {children}
          </Animated.View>
        )}
      </>
    </AnimatedPressable>
  )
}

export function Accordion() {
  return (
    <ScrollView style={styles.container}>
      <AccordionItem title="Item 1">
        <FakeContent />
      </AccordionItem>
      <AccordionItem title="Item 2">
        <FakeContent />
      </AccordionItem>
      <AccordionItem title="Item 3">
        <FakeContent />
      </AccordionItem>
      <AccordionItem title="Item 4">
        <FakeContent />
      </AccordionItem>
      <AccordionItem title="Item 5">
        <FakeContent />
      </AccordionItem>
    </ScrollView>
  )
}

function FakeContent() {
  return <View style={styles.fakeContent} />
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  title: {
    padding: 16,
    marginTop: 4,
    fontSize: 16,
    fontWeight: 'bold',
    backgroundColor: '#dcdcdc',
  },

  accordionPressable: {
    overflow: 'hidden',
  },

  fakeContent: {
    height: 400,
    backgroundColor: 'aquamarine',
  },
})