Accordion Component allow to pass props openDefualt (without animation) on first render.

[zeeshan-shabbir]

Description

I have three Accordion i want first open by defualt and other too close it worked. but when visit screen first time first render. it open the defualt open Accordion with animation. not already opened. my code

import React, { PropsWithChildren } from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
  withTiming,
  SharedValue
} from 'react-native-reanimated';

type AccordionItemProps = {
  isExpanded: SharedValue<boolean>;
  viewKey: string;
  style?: ViewStyle;
  duration?: number;
  children?: React.ReactNode;
};

const AccordionItem = ({
  isExpanded,
  children,
  viewKey,
  style,
  duration = 500,
}:AccordionItemProps) => {
  const height = useSharedValue(0);

  const derivedHeight = useDerivedValue(() =>
    withTiming(height.value * Number(isExpanded.value), {
      duration,
    })
  );

  const bodyStyle = useAnimatedStyle(() => ({
    height: derivedHeight.value,
  }));

  return (
    <Animated.View
      key={`accordionItem_${viewKey}`}
      style={[styles.animatedView, bodyStyle, style]}>
      <View
        onLayout={(e) => {
          height.value = e.nativeEvent.layout.height;
        }}
        style={styles.wrapper}>
        {children}
      </View>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    width: '100%',
    position: 'absolute',
    display: 'flex',
  },
  animatedView: {
    width: '100%',
    overflow: 'hidden',
  },
});

export default AccordionItem;

i am using like this

 const open = useSharedValue(openDefault); //openDefault is props having false as it defualt value

<AccordionItem isExpanded={open} viewKey={viewKey}>
        {children}
      </AccordionItem>

Steps to reproduce

1. try to set duration to 0.

Snack or a link to a repository

https://snack.expo.dev/GR6ji8KoeZ32w_RDt_sMw

Reanimated version

3.16.1

React Native version

0.75.3

Platforms

Android, iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes