Comments (3)
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.
from accordion-collapse-react-native.
Would it be possible to show an example for animating the collapse height?
from accordion-collapse-react-native.
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 .
from accordion-collapse-react-native.
Related Issues (20)
- changing CollapseHeader properties after expanding it HOT 1
- Can I show the collapse in flatlist? HOT 1
- How to set activeOpacity? HOT 8
- Clarification or apprach needed HOT 2
- Having issue with scrolling of whole accordian view HOT 2
- How to set disabled in AccordionList HOT 3
- How to expand CollapseBody only when button click in CollapseHeader HOT 1
- Doesnt work in Android
- Any option or prop to default collapsed list HOT 3
- Make mutiple accordion items remain opened. HOT 3
- ERESOLVE unable to resolve dependency tree
- How to use Swipeable in AccordionList ? HOT 1
- add support for hooks
- first child of header isExpanded is not changing when clicked
- How to make only one collapse open HOT 1
- Ios Crashing
- Collapse on CollapseBody press HOT 1
- how can i use activeopacity in this dependency i want to hide animation
- Support Typescript
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from accordion-collapse-react-native.