AnimationExperimental: Animated node does not respond to onPress event

[ivanbabanov]

Hello!
In my project I need an animated items falling down the screen and user should be able to tap on it. I've used AnimationExperemental Library and animation runs perfect, but item does not respond to onPress event until animation is completed.

Item for animation is described as class:

var AnimItem = React.createClass({
  getInitialState: function(){
    //console.log("getInitialState called "+ this.props.ref);
    return(
        { bubble1_img : require('image!bubble3'),
          bubbleStyle: {backgroundColor:'rgba(0,0,0,0)', opacity: 1, width: 102, borderRadius: 51} }
      );
  },
  bubbleClick: function(){
    console.log("Bubble tapped private");
  },
  render: function(){
        return(
        <View style={ this.state.animItemStyle } ref={ this.props.ref }>
        <TouchableHighlight onPress={ ()=>{console.log('Pressed');} }  style={{ borderRadius: 51, height:102, width: 102, borderWidth:1 , borderColor:'red' }}>
        <Image source={this.state.item_img} style={{ width: 100, height: 100, borderRadius: 50 }}/>

        </TouchableHighlight>
        <Text> {this.props.bubname} </Text>
        </View>
      );
  }
});

Animation is called:

AnimationExperimental.startAnimation({
  node: itemRef,
  duration: 10000,
  easing: 'easeInQuad',
  property: 'positionY',
  fromValue: 0,
  toValue: 1000,}, this.animCallback( itemRef ));

So, maybe I'm wrong in used way and there isa another way to make an item animated and responsible for onPress/tap/click events?

[brentvatne]

AnimationExperimental uses CoreAnimation and the animations occur in the presentation layer so this breaks hit detection. You can use it for static animations right now, but this api is deprecated and I'd recommend using react-tween-state until the new api is release (soon!).

[ivanbabanov]

Thanks you for fast response. I had the same thoughts but I was need a confirmation from expert. Is my understanding correct that react-tween-state will solve my problem and it will not block hit detection during the animation?

[brentvatne]

@ivanbabanov - correct! it should work just fine with that :)