Cannot set React Native Animated value to View component CSS style

4
votes

I am trying to have a View component style animate. I am following the examples listed here: https://facebook.github.io/react-native/docs/animations.html

But, when I render my component, I get the error:

[tid:com.facebook.React.ShadowQueue][RCTConvert.m:55] Error setting property 'height' of RCTView with tag #7: JSON value '{ "_animation" = ""; "_children" = ( ); "_listeners" = { }; "_offset" = 0; "_value" = 200; }' of type NSDictionary cannot be converted to NSNumber

This is how I'm setting the Animated value in my constructor:

  constructor() {
    super();
    this.state = {
      titleContainerHeight: new Animated.Value(200),
    }
  }

And here is my view:

<View style={[styles.titleContainer,{height:this.state.titleContainerHeight}]}>
  <Text style={[{color: 'white'}]}>App logo here</Text>
</View>

Seems like I'm going everything just how the documentation describes, and I'm doing the same thing in another component without getting any errors. So, what is wrong here?

1
animationviewreact-nativeanimated

1 Answers

22
votes

Ah never mind, I found what I was doing wrong. I forgot to use the "Animated.View" component specifically. This works:

<Animated.View style={[styles.titleContainer,{height:this.state.titleContainerHeight}]}>
  <Text style={[{color: 'white'}]}>App logo here</Text>
</Animated.View>