SearchBarAnimation.js

maxActionAnimated = 88; // Location input height + padding (Bottom part)
actionAnimated = new Animated.Value(0);  

getTransformWrapper() {
  let byScroll = Animated.add(
    Animated.multiply(this.clampedScroll, -1),
    this.scrollY.interpolate({ // To negative
      inputRange: [0, 1],
      outputRange: [0, -1],
    }).interpolate({ // Add bottom height part 
      inputRange: [-this.topPartHeight, 0],
      outputRange: [0, this.minClamp],
      extrapolate: 'clamp',
    })
  );

  return {
    transform: [{
      translateY: Animated.add(byScroll, this.actionAnimated)
    }]
  };
}

getTransformSearchBar() {
  return {
    transform: [{
      translateY: Animated.add(
        this.actionAnimated.interpolate({
          inputRange: [0, this.maxActionAnimated],
          outputRange: [0, -this.topPartHeight + this.arrowHeight],
          extrapolate: 'clamp',
        }), 
        this.scrollY.interpolate({
        inputRange: [0, this.topPartHeight],
        outputRange: [0, this.topPartHeight - this.arrowHeight],
        extrapolate: 'clamp',
      }))
    }]
  };
}

getOpacitySearchBar() {
  return {
    opacity: this.clampedScroll.interpolate({
      inputRange: [this.topPartHeight, this.maxClamp],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    })
  };
}

getOpacityLocationInput() {
  return {
    opacity: Animated.add(
      this.actionAnimated.interpolate({
        inputRange: [0, this.maxActionAnimated],
        outputRange: [0, 1],
        extrapolate: 'clamp',
      }), 
      this.scrollY.interpolate({
        inputRange: [0, this.topPartHeight],
        outputRange: [1, 0],
        extrapolate: 'clamp',
      })
    )
  };
}

getArrowMinimizeStyle() {
  return {
    transform: [{
      translateY: Animated.add(
        this.actionAnimated.interpolate({
          inputRange: [0, this.maxActionAnimated],
          outputRange: [0, -this.topPartHeight],
          extrapolate: 'clamp',
        }),
        this.scrollY.interpolate({
          inputRange: [0, this.topPartHeight],
          outputRange: [0, this.topPartHeight],
          extrapolate: 'clamp',
        })
      )
    }],
    opacity: Animated.add(
      this.actionAnimated.interpolate({
        inputRange: [0, this.maxActionAnimated],
        outputRange: [0, 1],
        extrapolate: 'clamp',
      }),
      this.scrollY.interpolate({
        inputRange: [0, this.topPartHeight],
        outputRange: [1, 0],
        extrapolate: 'clamp',
      })
    )
  };
}

getStyleSuggestion() {
  let scroll = this.scrollY.interpolate({ // To negative
    inputRange: [0, 1],
    outputRange: [0, -1],
  });

  return {
    opacity: Animated.add(
      this.actionAnimated.interpolate({
        inputRange: [0, this.maxActionAnimated],
        outputRange: [0, 1],
        extrapolate: 'clamp',
      }),
      scroll.interpolate({
        inputRange: [-this.topPartHeight, 0],
        outputRange: [0, 1],
        extrapolate: 'clamp'
      })
    ),
    transform: [{
      translateY: Animated.add(
        this.actionAnimated.interpolate({
          inputRange: [0, this.maxActionAnimated],
          outputRange: [0, this.topPartHeight],
          extrapolate: 'clamp',
        }),
        scroll.interpolate({
          inputRange: [-this.topPartHeight, 0],
          outputRange: [this.topPartHeight, this.wrapperHeight],
          extrapolate: 'clamp'
        })
      )
    }]
  };
}