Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zeeshan-shabbir opened this issue Nov 15, 2024 · 0 comments
Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided

Comments

@zeeshan-shabbir
Copy link

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

@github-actions github-actions bot added Repro provided A reproduction with a snippet of code, snack or repo is provided Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS labels Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snippet of code, snack or repo is provided
Projects
None yet
Development

No branches or pull requests

1 participant