Jan 12, 2021
0
Level 8
React Native: animate (slide down/up) view with dynamic height
Hi everybody, I'm trying to animate (slide down/up) a view containing a dynamic list, since that list is dynamic I don't know how to have an Animated.View with dynamic height, currently I use a fixed value in my code, which is very hacky. I'm a react-native rookie and react native animations seem QUITE complicated (I have been reading docs and wow) so any help is really appreacited.
//Currently using a fixed value (300), how to get height of dynamic height View container?
const [ bounceValue, setBounceValue ] = useState(new Animated.Value(300));
//Is the animated view hidden or not?
const [ isHidden, setIsHidden ] = useState(true);
//I toggle the animated slide with this method
const toggleSlide = ()=>
{
var toValue = 475; //How to get dynamic height of View to animate
if(isHidden)
{
//Here I hide (slide down) the animated View container
toValue = 0;
}
Animated.spring(
bounceValue,
{
toValue: toValue,
velocity: 3,
tension: 2,
friction: 8,
useNativeDriver: true
}
).start();
setIsHidden(!isHidden);
}
And in my view:
<Animated.View style={[styles.subView, {transform: [{translateY: bounceValue}]}, { padding:10,position:'absolute',backgroundColor:'white' }]}>
{cartProducts).map((products,index) => {return (
<View style={{ width:'100%',flexDirection:'row', alignItems:'center', justifyContent:'space-between',marginBottom:5}}>
<Text style={{ fontSize:14, color:'rgb(68,68,68)' }}>Product: {index+1}</Text>
</View>)})}
</View>
</Animated.View>
Thanks in advance!
Please or to participate in this conversation.