How to use the react-native-reanimated.interpolate function in react-native-reanimated

return ranges.reduce((acc, [name, range]) => {
    const animatedValue = A.interpolate(baseValue, {
      ...range,
      extrapolate: A.Extrapolate.CLAMP,
    });

    acc[name] = animatedValue;

    return acc;
  }, {});
}

_renderItem = props => ({ route, index }) => {
        const { position } = props;

        const inputRange = [0, 0.48, 0.49, 0.51, 0.52, 1, 1.48, 1.49, 1.51, 1.52, 2, 2.48, 2.49, 2.51, 2.52, 3];

        const scale = Animated.interpolate(position, {
            inputRange,
            outputRange: inputRange.map(x => (Math.trunc(x) === x ? 2 : 0.1)),
        });

        const opacity = Animated.interpolate(position, {
            inputRange,
            outputRange: inputRange.map(x => {
                const d = (x - Math.trunc(x)).toFixed(2);
                return d === (0.49).toFixed(2) || d === (0.51).toFixed(2) || Math.round(x) !== index ? 0 : 1;
            }),
        });
        return (

export default ({ transition, y, tabs, scrollView }: TabHeaderProps) => {
  const index = new Value(0);
  const [measurements, setMeasurements] = useState(
    new Array(tabs.length).fill(0)
  );
  const opacity = transition;
  const indexTransition = withTransition(index);
  const width = interpolate(indexTransition, {
    inputRange: tabs.map((_, i) => i),
    outputRange: measurements
  });
  const translateX = interpolate(indexTransition, {
    inputRange: tabs.map((_tab, i) => i),
    outputRange: measurements.map((_, i) => {
      return (
        -1 *
          measurements
            .filter((_measurement, j) => j < i)
            .reduce((acc, m) => acc + m, 0) -
        8 * i
      );
    })
  });
  const style = {

{value => (
        
          Disappears only when closing
        
      )}

getElementStyle() {
    const {sourceLayout, targetLayout} = this.state;
    if (sourceLayout && this.transition) {
      return {
        position: 'absolute',
        width: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.width, targetLayout.width],
        }),
        height: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.height, targetLayout.height],
        }),
        top: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.y, targetLayout.y],
        }),
        left: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.x, targetLayout.x],
        }),
      };

return Object.keys(normalized).reduce((acc, name) => {
    const pairs = normalized[name];

    const { inputRange, outputRange } = generateRanges(pairs);

    const animatedValue = A.interpolate(baseValue, {
      inputRange,
      outputRange,
      extrapolate: A.Extrapolate.CLAMP,
    });

    acc[name] = animatedValue;

    return acc;
  }, {});
}

}
    });
    const opacityOutputRange = inputRange.map(i => {
      if (index === i) {
        return 1;
      } else {
        return 0.3;
      }
    });

    const translateX = Animated.interpolate(position, {
      inputRange,
      outputRange: translateOutputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });
    const scale = Animated.interpolate(position, {
      inputRange,
      outputRange: scaleOutputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });
    const opacity = Animated.interpolate(position, {
      inputRange,
      outputRange: opacityOutputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });

    return {
      transform: [{ translateX }, { scale }],
      opacity,
    };
  }, [index, layout, length, position]);

export default ({ transition, y, tabs, scrollView }: TabHeaderProps) => {
  const index = new Value(0);
  const [measurements, setMeasurements] = useState(
    new Array(tabs.length).fill(0)
  );
  const opacity = transition;
  const indexTransition = withTransition(index);
  const width = interpolate(indexTransition, {
    inputRange: tabs.map((_, i) => i),
    outputRange: measurements
  });
  const translateX = interpolate(indexTransition, {
    inputRange: tabs.map((_tab, i) => i),
    outputRange: measurements.map((_, i) => {
      return (
        -1 *
          measurements
            .filter((_measurement, j) => j < i)
            .reduce((acc, m) => acc + m, 0) -
        8 * i
      );
    })
  });
  const style = {
    borderRadius: 24,
    backgroundColor: "black",
    width,
    flex: 1

if (sourceLayout && this.transition) {
      return {
        position: 'absolute',
        width: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.width, targetLayout.width],
        }),
        height: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.height, targetLayout.height],
        }),
        top: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.y, targetLayout.y],
        }),
        left: Animated.interpolate(this.transition, {
          inputRange: [0, 100],
          outputRange: [sourceLayout.x, targetLayout.x],
        }),
      };
    }
  }

const getFloatingPositions = (index, zoom) => {
  const arr = Array.from({ length: CELL_NUM });
  const opacity = Animated.interpolate(zoom, {
    inputRange: [0, 0.5, 1],
    outputRange: [1, 0, 0]
  });

  return arr.map((_, i) => {
    const offsetX = -1 * i * CELL_WIDTH - theme.sizes.mid;
    const offsetY = -1 * theme.sizes.mid;
    const isZooming = Animated.eq(index, i);

    const translateX = Animated.interpolate(zoom, {
      inputRange: [0, 0.8, 1],
      outputRange: [0, offsetX, offsetX]
    });

    const translateY = Animated.interpolate(zoom, {
      inputRange: [0, 0.8, 1],