CODEWITHSUNDEEP
cssanimationreact-nativereact-animated
Daniel Janke
Daniel Janke

Reputation: 83

React Native Animated interpolate opacity based on multiple values

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.

      <Animated.View
        style={[
          {
            opacity: this.state.scrollX.interpolate({
              inputRange: [0, 414, 828],
              outputRange: [0, 1, 1]
            })
          },
          {
            opacity: this.state.scrollY.interpolate({
              inputRange: [-168, -167, -166, -85, -84],
              outputRange: [1, 1, 1, 0, 0]
            })
          }
        ]}
      >
        <Text>Content....</Text>
      </Animated.View>

This doesn't work of course because one opacity value overwrites the other, but it makes clear what I want to achieve.

Upvotes: 3

Views: 5502

Answers (1)

Estev&#227;o Lucas
Estev&#227;o Lucas

Reputation: 4698

You can use Animated.add() for it.

<Animated.View
  style={[
    {
      opacity: Animated.add(scrollX, scrollY).interpolate({
        inputRange: [],
        outputRange: []
      })
    },
  ]}
>

Upvotes: 5

Related Questions