React Native Animated Add Interpolate

Question

I have a React Native Animated.view component whose opacity I would like to interpolate based on the scrollview position. However, I want to interpolate the opacity using two values (x and y) instead of one.

this.nextCardOpacityX = this.position.x.interpolate({
  inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
  outputRange: [1, 0, 1],
  extrapolate: 'clamp',
});
this.nextCardOpacityY =  this.position.y.interpolate({
  inputRange: [-SCREEN_HEIGHT / 2 + 100, 0, SCREEN_HEIGHT / 2 - 100],
  outputRange: [1, 0, 0],
  extrapolate: 'clamp'
});

styles.opacity = {
  opacity: this.nextCardOpacityY > this.nextCardOpacityX ? this.nextCardOpacityY : this.nextCardOpacityX,
}

This doesn't work of course because the nextCartOpacityY only affects, but it makes clear what I want to achieve. I think it can be done with Animated.add, but I am not sure how I can use add with interpolate

React Native Animated Add Interpolate

0 Answers