Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot set React Native Animated value to View component CSS style

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?

like image 528
JackKalish Avatar asked Nov 28 '22 14:11

JackKalish


1 Answers

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>
like image 139
JackKalish Avatar answered Dec 04 '22 07:12

JackKalish