Gabotronix's avatar

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!

0 likes
0 replies

Please or to participate in this conversation.