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

Question

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.

Answer 1

This works for me on expo:

export default class App extends React.Component {

state = {
    animation: new Animated.Value(0)
}

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

  render() {
    return (
     <TouchableOpacity style={{flex: 100}} onPress={this.onPress}>
       <Animated.View style={{ flex: this.state.animation, backgroundColor:'blue'}}>
       </Animated.View>
       <View style={{flex:100, backgroundColor:'red'}}>
      </View>
    </TouchableOpacity>
    );
  }
}

Here is a working example: https://snack.expo.io/S1t5OaWL7

But I guess yes safer to animate height for performances. Not sure how flex is interpreted.