[React-Native] reanimated v3 setTimeout

얼른 답변을 줘요 CircleCI !!!

react-native에서 react-native-reanimated v3을 사용하던 중 뭔가 심상치 않은 에러를 만났다

마주한 상황

길이가 각각 다른 input 3개를 순차적으로 입력하면 지정해둔 길이만큼 늘어나는 애니메이션을 작업 중이었다.
길이만 늘어난다면 괜찮겠지만 input에 focus가 되고 특정 style이 적용이 되야한다.

하지만 input에 style은 적용이 되지만 포커스가 잡히지 않고 이전 input에 계속 focus가 머물러있었다.

여러가지 테스트를 해보던 중 그런 생각을 해봤다.

만약 애니메이션이 동작하는 시간에 focus가 안되는게 아닐까...?

내가 생각한 가설이 맞았고 300ms동안 움직이는 input에게 300ms의 여유 시간을 주기로 했다.

해결한 방법

focus가 되기 전 setTimeout으로 input에 설정한 시간만큼 시간을 입력해주기로 했다.

하지만 좀 더 효율적이면서 공통적으로 사용할 수 있게 순수 함수로 빼기로 했다.

export const wait = (timeout: number): Promise<unknown> =>
  new Promise((resolve) => {
    setTimeout(resolve, timeout);
  });

이렇게 함수를 작성하고 timeout 시간을 파라미터로 전달해주면 전달해준 시간을 기다렸다가 다음 동작을 실행하게 된다 !

예시

await wait(300);
titleInputRef.current?.focus();

이렇게 되면 300ms를 기다렸다가 titleInputRef에 focus가 된다.

주의할 점

os 특성상 그런지 모르겠는데 안드로이드는 정확한 시간을 맞추면 못따라오는 경우도 가끔 발생해서 +100ms를 해주는 경우도 있었다.