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

const NAVBAR_HEIGHT = 56;
const INITIAL_LAYOUT = {
  height: 0,
  width: Dimensions.get('window').width,
};

@observer
export default class WeekTabView extends React.Component {

  // tslint:disable max-line-length
  private tabBar: any;
  private tabBarUpdated: boolean = false;
  private panX = new Animated.Value(0);
  private scrollY = new Reanimated.Value(0);
  private scrollEndDragVelocity = new Reanimated.Value(10000000);
  private snapOffset = new Reanimated.Value(0);
  private clock = new Reanimated.Clock();
  private diffClampNode = Reanimated.diffClamp(Reanimated.add(this.scrollY, this.snapOffset), 0, NAVBAR_HEIGHT);
  private inverseDiffClampNode = Reanimated.multiply(this.diffClampNode, -1);
  private snapPoint = Reanimated.cond(Reanimated.lessThan(this.diffClampNode, NAVBAR_HEIGHT / 2), 0, -NAVBAR_HEIGHT);
  private animatedNavBarTranslateY = Reanimated.cond(
    Reanimated.neq(this.scrollEndDragVelocity, 10000000),
    runScrollEndSpring({
      diffClampNode: this.diffClampNode,
      clock: this.clock,
      from: this.inverseDiffClampNode,
      velocity: 0,
      toValue: this.snapPoint,
      scrollEndDragVelocity: this.scrollEndDragVelocity,
      snapOffset: this.snapOffset,
      height: NAVBAR_HEIGHT,

this.state = {
      isFocused: props.autoFocus,
      value: props.value,
    };
  }

  componentDidUpdate(prevProps) {
    const { value } = this.props;

    if (value !== prevProps.value) {
      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({ value });
    }
  }

  animation = new Animated.Value(0);

  format = string => (this.props.format ? this.props.format(string) : string);

  onBlur = (...props) => {
    Animated.timing(this.animation, {
      duration: 1,
      easing: Easing.linear,
      toValue: 0,
    }).start();

    this.setState({ isFocused: false });

    if (this.props.onBlur) this.props.onBlur(...props);
  };

  onChange = event => {

function generateTweenAnimation(
  props: TweenAnimationProps,
): Animation {
  const animationState = new A.Value(
    AnimationState.START_POINT,
  );
  const keys = Object.keys(props.from);
  const masterValue = new A.Value(0);
  const inputRange: [number, number] = [0, 1];

  const values: ReanimatedValues = keys.reduce(
    (acc, current) => {
      const from = props.from[current];
      const to = props.to[current];

      // if we are interpolating colors
      if (isRGB(from) && isRGB(to)) {
        acc[current] = bInterpolateColor(masterValue, {
          inputRange,
          outputRange: [from, to],
        });
        // currently only numbers are allowed
      } else if (isNumber(from) && isNumber(to)) {
        acc[current] = interpolate(masterValue, {

const getLayout = (layoutsObj, id) => {
  if (!layoutsObj) {
    return null;
  }
  const layout =
    layoutsObj[id] ||
    (layoutsObj[id] = {
      hasMeasured: new Animated.Value(0),
      x: new Animated.Value(0),
      y: new Animated.Value(0),
      w: new Animated.Value(0),
      h: new Animated.Value(0),
    });
  return layout;
};

function transformSpringConfigToAnimatedValues(
  config: Partial,
): AnimatedSpringConfig {
  return {
    damping: config.damping
      ? new A.Value(config.damping)
      : defaultConfig.damping,
    stiffness: config.stiffness
      ? new A.Value(config.stiffness)
      : defaultConfig.stiffness,
    mass: config.mass ? new A.Value(config.mass) : defaultConfig.mass,
    restDisplacementThreshold: config.restDisplacementThreshold
      ? new A.Value(config.restDisplacementThreshold)
      : defaultConfig.restDisplacementThreshold,
    restSpeedThreshold: config.restSpeedThreshold
      ? new A.Value(config.restSpeedThreshold)
      : defaultConfig.restSpeedThreshold,
    overshootClamping: new A.Value(config.overshootClamping ? 1 : 0),
  };
}

): AnimatedSpringConfig {
  return {
    damping: config.damping
      ? new A.Value(config.damping)
      : defaultConfig.damping,
    stiffness: config.stiffness
      ? new A.Value(config.stiffness)
      : defaultConfig.stiffness,
    mass: config.mass ? new A.Value(config.mass) : defaultConfig.mass,
    restDisplacementThreshold: config.restDisplacementThreshold
      ? new A.Value(config.restDisplacementThreshold)
      : defaultConfig.restDisplacementThreshold,
    restSpeedThreshold: config.restSpeedThreshold
      ? new A.Value(config.restSpeedThreshold)
      : defaultConfig.restSpeedThreshold,
    overshootClamping: new A.Value(config.overshootClamping ? 1 : 0),
  };
}

Animated.timing(value, {
    duration: 175,
    easing: Easing.bezier(0.165, 0.84, 0.44, 1),
    isInteraction: false,
    toValue,
    useNativeDriver: true,
  }).start()
);

export default class FlyInAnimation extends PureComponent {
  static propTypes = {
    children: PropTypes.any,
    style: PropTypes.object,
  };

  animation = new Animated.Value(0)

  componentDidMount = () => buildAnimation(this.animation, 1)

  componentWillUnmount = () => buildAnimation(this.animation, 0)

  buildInterpolation = outputRange => (
    Animated.interpolate(this.animation, {
      inputRange: [0, 1],
      outputRange,
    })
  )

  render = () => (

export const preserveMultiplicativeOffset = (
  value: Animated.Adaptable,
  state: Animated.Adaptable
) => {
  const previous = new Animated.Value(1);
  const offset = new Animated.Value(1);

  return block([
    cond(
      eq(state, State.BEGAN),
      [set(previous, 1)],
      [
        set(offset, multiply(offset, divide(value, previous))),
        set(previous, value)
      ]
    ),
    offset
  ]);
};

  const widthAnim = useInitRef(() => new Animated.Value(measurement.width));
  const stylePos = useInitRef(() => new Animated.Value(position));

import Animated from 'react-native-reanimated';
import { State as GestureState } from 'react-native-gesture-handler';

export type Binary = 0 | 1;

const TRUE_NODE = new Animated.Value(1);
const FALSE_NODE = new Animated.Value(0);
const UNSET_NODE = new Animated.Value(-1);

const NOOP_NODE = FALSE_NODE;

const {
  abs,
  add,
  and,
  block,
  cond,
  divide,
  eq,
  greaterThan,
  lessThan,
  max,
  min,