Unsupported Layout Animation

[ilansas]

Trying to render my scene, which contains a SlideMenu in which each items change my Content View, I get that error :

[RCTLog][tid:0x7f8f7054b4b0]
[RCTUIManager.m:466]>Unsupported layout animation createConfig property (null)

I suppose it comes from the animation of the layout of the SlideMenu, but occurs only when it triggers a change of 'fragment' (which means the content view) on the click of an item in it. Otherwise the menu closes himself normally.

When clicking "dismiss" my fragment is displayed well, but I don't see the SlideMenu closing up.

I don't know if this comes from the animation itself or the combination of the change of element and the animation together.

Here is some of my code :

toggleSlideMenu: function() {
  if (this.state.slideMenuIsAccessible){
    if(this.state.menuIsOpen) {
      //close Menu
    } else {
      //open Menu
    }
    queueAnimation(this.props.animation);
    this.center.setNativeProps({left: this.offset}); //updates UI
  }
});

To fragment selection happens in the generalTemplate :

  matchIdToFragment: function(fragmentId) {
    switch (fragmentId) {
      case 'suggestions':
        return <Suggestions />;
      case 'onScreen':
        return <OnScreen />;
      case 'zap':
        return <Zap setFragmentId={this.props.setFragmentId} setItemId={this.setItemId}/>;
      case 'programDetails':
        return <ProgramDetails itemId={this.state.itemId}/> ;
    }
  },
  render: function() {
    var fragment = this.matchIdToFragment(this.props.fragmentId);

    return (
      <View style={styles.container}>
        <View style={styles.fragmentView}>
          {fragment}
        </View>
        <NavigationBar 
          onOpenUserMenu={this.onOpenUserMenu}
          toggleSlideMenu={this.toggleSlideMenu}/>   
      </View>
    );
  }

Pressing item in the menu triggers the closing of the menu (and transmits ID, which doesn't appears here, to the generalTemplate :

var Section = React.createClass({
  onPress: function() {
    this.props.toggleSlideMenu();
  },
  render: function() {
    return (
      <TouchableHighlight underlayColor='#DFDFDF' onPress={this.onPress}>
        //Name and icon of the menu item  
      </TouchableHighlight>
    );
  }
});

And the code of the animation (not sure it's useful but we never know) :

var LayoutAnimation = require('react-native').LayoutAnimation;
var DEFAULT_ANIMATION = 'linear';

var animations = {
  layout: {
    linear: {
      duration: 300,
      create: {
        type: LayoutAnimation.Types.linear,
      },
      update: {
        type: LayoutAnimation.Types.linear,
        springDamping: 0.7,
      },
    },
  },
};

var layoutAnimationConfigs = {
  'spring': animations.layout.spring,
  'linear': animations.layout.linear,
  'easeInOut': animations.layout.easeInEaseOut,
};

module.exports = function(animation) {
  var _animation = layoutAnimationConfigs[animation];
  if (!_animation) {
    _animation = layoutAnimationConfigs[DEFAULT_ANIMATION];
  }

  LayoutAnimation.configureNext(_animation);
}

[muzix]

I think you are missing "property" in create section.

     create: {
        type: LayoutAnimation.Types.linear,
        property: LayoutAnimation.Properties.opacity,
      },

[ilansas]

You're right ! thank you, I took these animations from a github project and apparently it isn't totally stable... Thanks again !

[piyushchauhan2011]

Can you provide your example code or repository ?