as.js

class App extends PureComponent {
  getOutputValueForIndex = (index, expectedIndex, { prevValue, targetValue, nextValue, defaultValue }) => {
    const delta = index - expectedIndex

    switch (delta) {
      case -1:
        return prevValue
      case 0:
        return targetValue
      case 1:
        return nextValue
      default:
        return defaultValue
    }
  }

  getInterpolation = (expectedIndex, currentPrice, targetPrice, animationValues) => {

    const getValue = index => {
      const maxPrice = ww / 10 * targetPrice
      const minPrice = ww / 10 * currentPrice
      return Math.max(Math.min(ww / 10 * index, maxPrice), minPrice)
    }

    return this.animatedImageViewScrollValue.interpolate({
      inputRange: new Array(10).fill(0).map((item, index) => getValue(index)),
      outputRange: new Array(10)
        .fill(0)
        .map((item, index) => this.getOutputValueForIndex(index, expectedIndex, animationValues)),
      extrapolate: 'clamp',
    })
  }

  renderAnimatedNumber = (item, index, currentPrice, targetPrice) => {
    const opacity = this.getInterpolation(item, currentPrice, targetPrice, {
      prevValue: 0,
      targetValue: 1,
      nextValue: 0,
      defaultValue: 0,
    })

    const translateY = this.getInterpolation(item, currentPrice, targetPrice, {
      prevValue: 18,
      targetValue: 0,
      nextValue: -18,
      defaultValue: 18,
    })

    return (
      <Animated.View
        key={index}
        style={{
          alignItems: 'center',
          justifyContent: 'center',
          opacity: opacity,
          transform: [{ translateY }],
          ...StyleSheet.absoluteFill,
        }}
      >
        <Text style={{
          fontSize: 21,
          color: '#333',
          fontWeight: '900'
        }}>{item}</Text>
      </Animated.View>
    )
  }

  render() {
    const currentPrice = 2
    const targetPrice = 6
    const numbers = new Array(10).fill(0).map((number, index) => index)
    const numberRenders = numbers.map((item, index) =>
      this.renderAnimatedNumber(item, index, currentPrice, targetPrice),
    )

    return <View style={styles.contentViewContainer}>{numberRenders}</View>
  }
}