Which is more performant useAnimationState vs animate prop

[Hmoulvad]

Which of the following code examples are most performant for me to implement this animation?

useAnimationState

import { MotiView, useAnimationState } from 'moti';
import React, { useEffect, useState } from 'react';
import Collapsible from 'react-native-collapsible';
import { AnimationTimings } from '~/app/styles';
import { Divider } from '../Divider';
import { NavigationArrow } from '../NavigationArrow';
import { Spacing } from '../Spacer';
import { Text } from '../Text';
import { Container, Header } from './styles';

type Props = {
  title?: string;
  headerComponent?: React.ReactNode;
  noDivider?: boolean;
  isContentCollapsed?: boolean;
  children: React.ReactNode;
};

export function Accordion({ title, headerComponent, children, noDivider, isContentCollapsed = true }: Props) {
  const [isAccordionOpen, setIsAccordionOpen] = useState(isContentCollapsed);
  const duration = AnimationTimings.Fast;

  // Create animation state.
  const animation = useAnimationState({
    from: {
      transform: [{ rotate: '0deg' }],
    },
    to: {
      transform: [{ rotate: '180deg' }],
    },
  });

  // Updated internal state if external state changes and runs animation.
  useEffect(() => {
    if (isContentCollapsed) {
      setIsAccordionOpen(isContentCollapsed);
      runAnimation();
    }
  }, [isContentCollapsed]);

  // Toggles accordion state and runs animation.
  const toggleAccordion = () => {
    setIsAccordionOpen(!isAccordionOpen);
    runAnimation();
  };

  // Runs animation to next transition state.
  const runAnimation = () => {
    animation.transitionTo(state => {
      if (state === 'from') {
        return 'to';
      }
      return 'from';
    });
  };

  return (
    <Container>
      <Header onPress={toggleAccordion}>
        {title ? <Text>{title}</Text> : null}
        {headerComponent ? headerComponent : null}
        <MotiView state={animation} transition={{ type: 'timing', duration }}>
          <NavigationArrow direction="Down" />
        </MotiView>
      </Header>

      {/* @ts-ignore */}
      <Collapsible collapsed={isAccordionOpen} duration={duration}>
        {children}
        <Spacing small />
      </Collapsible>

      {!noDivider && <Divider />}
    </Container>
  );
}

Animate prop

import { MotiView, useAnimationState } from 'moti';
import React, { useEffect, useState } from 'react';
import Collapsible from 'react-native-collapsible';
import { AnimationTimings } from '~/app/styles';
import { Divider } from '../Divider';
import { NavigationArrow } from '../NavigationArrow';
import { Spacing } from '../Spacer';
import { Text } from '../Text';
import { Container, Header } from './styles';

type Props = {
  title?: string;
  headerComponent?: React.ReactNode;
  noDivider?: boolean;
  isContentCollapsed?: boolean;
  children: React.ReactNode;
};

export function Accordion({ title, headerComponent, children, noDivider, isContentCollapsed = true }: Props) {
  const [isAccordionOpen, setIsAccordionOpen] = useState(isContentCollapsed);
  const duration = AnimationTimings.Fast;

  useEffect(() => {
    if (isContentCollapsed) {
      setIsAccordionOpen(isContentCollapsed);
    }
  }, [isContentCollapsed]);

  const toggleAccordion = () => {
    setIsAccordionOpen(!isAccordionOpen);
  };

  return (
    <Container>
      <Header onPress={toggleAccordion}>
        {title ? <Text>{title}</Text> : null}
        {headerComponent ? headerComponent : null}
        <MotiView
          animate={{ transform: [{ rotate: !isAccordionOpen ? '0deg' : '180deg' }] }}
          transition={{ type: 'timing', duration }}>
          <NavigationArrow direction="Down" />
        </MotiView>
      </Header>

      {/* @ts-ignore */}
      <Collapsible collapsed={isAccordionOpen} duration={duration}>
        {children}
        <Spacing small />
      </Collapsible>

      {!noDivider && <Divider />}
    </Container>
  );
}

There is much less boiler plate to write if you use the animate prop, but would really like to know if it is as efficient.

[nandorojo]

could you make a simpler set of examples for me to look at that removes any non-moti related code?