Accordion-Collapse-react-native
Accordion-Collapse-react-native copied to clipboard
Published
20 hours ago •
marouanekadiri
marouanekadiri
How to add animation
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.
Would it be possible to show an example for animating the collapse height?
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 .
