How to use React Native Animate to change view flex from 0 to 1

I have two views inside another view which has default flexDirection style so it is columnar. When the user clicks on an item in the bottom view (marked options below), I want the top view to animate to to be equal sizes with the bottom view and display the details of the selected option.

state = {    animation: new Animated.Value(0)}...<View style={{flex: 1}}><Animated.View style={{ flex: this.state.animation}}>      {...details}</Animated.View><View style={{flex:1}}>      {...options}</View></View>

I am using the below method to change the value to grow the flex to 1.

onPress = () => {    Animated.timing(this.state.animation, {        toValue: 1,        duration: 1000    }).start()}

The issue I am running into is there is no animation, it just instantly appears no matter the duration I set.