Most basic example of set of value not translating view

Question

I am using react-native-reanimated v1. I am doing a very simple test, a view initially mounts at translation y of 50, and then a useEffect I set(val, 400) to make it move more. But it is not. Here is a snack of the problem, and the code is below - https://snack.expo.io/@saab/set-value-not-moving-view

Does anyone know why doing set on the reanimated value is not updating the position?

import React, { useEffect } from 'react';
import { View } from 'react-native';
import Reanimated from 'react-native-reanimated';

export default function App() {
  return <OtherView />;
}

function OtherView() {
  const val = Reanimated.useValue(50);

  React.useEffect(() => {
    Reanimated.set(val, 400);
  }, [val]);

  return (
    <Reanimated.View
      style={{
        backgroundColor: 'steelblue',
        height: 100,
        width: 100,
        transform: [{ translateY: val }],
      }}
    />
  );
}

Answer 1

https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/value/

From the docs:

const v = useValue(0);
/// ...
v.setValue(100);

so you should change:

Reanimated.set(val, 400);

to:

  val.setValue(400);