How to add animation #50

thebiltheory · 2020-10-26T12:36:04Z

Is it possible to animate the opening of the box?

marouanekadiri · 2020-10-27T19:32:17Z

You can animate the body the way you want in your application. e.g. This component has a fade animation on mount,

const Body = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 10000,
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View style={{opacity: fadeAnim}}>
      <Text>test2</Text>
    </Animated.View>
  );
};

If I render this component inside the CollapseBody,

<Collapse>
        <CollapseHeader>
          <View>
            <Text>header</Text>
          </View>
        </CollapseHeader>
        <CollapseBody>
          <Body />
        </CollapseBody>
</Collapse>

This will result in a fade animation when you toggle the Collapse component (since the CollapseBody mounts until we toggle it)
You can play around with animation using API provided or Libraries and put whatever content inside Collapse and animate it the way you want.

lukeinage · 2022-08-11T09:43:39Z

Would it be possible to show an example for animating the collapse height?

AhmedTriki-IT · 2023-01-19T13:32:15Z

i appreciate your work, i think It will look better if there is a props for an animation like (True or False) if we want to activate the animation on opening or on closing the accordion .

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to add animation #50

How to add animation #50

thebiltheory commented Oct 26, 2020

marouanekadiri commented Oct 27, 2020 •

edited

Loading

lukeinage commented Aug 11, 2022

AhmedTriki-IT commented Jan 19, 2023

How to add animation #50

How to add animation #50

Comments

thebiltheory commented Oct 26, 2020

marouanekadiri commented Oct 27, 2020 • edited Loading

lukeinage commented Aug 11, 2022

AhmedTriki-IT commented Jan 19, 2023

marouanekadiri commented Oct 27, 2020 •

edited

Loading