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.

Sign up for GitHub

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

Jump to bottom

How to add animation #50

Open
thebiltheory opened this issue Oct 26, 2020 · 3 comments
Open

How to add animation #50

thebiltheory opened this issue Oct 26, 2020 · 3 comments

Comments

@thebiltheory
Copy link

Is it possible to animate the opening of the box?
@marouanekadiri
Copy link
Owner

marouanekadiri commented Oct 27, 2020 •
edited

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
Copy link

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

@AhmedTriki-IT
Copy link

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 .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@thebiltheory @lukeinage @marouanekadiri @AhmedTriki-IT