[React Native] 애니메이션 간소화 해결하기 (애니메이션이 멈추는 현상)

 

 

 

테스터의 기기에서 화면이 멈추는 문제가 발생했다.

현상은 input 터치 후 bottom-sheet가 올라오는 과정에서 애니메이션도 동작하지않고 화면 자체가 멈췄다.

 

 

 

1. 해당 기기의 버전/기종 문제아닐까?

같은 기종이나 버전으로 테스트해봤는데 증상이 재현되지 않았다.

 

 

2. 바텀시트의 문제일까?

Bottom Sheet의 애니메이션이 동작하지 않는 것으로 판단했다.

사용한 Bottom Sheet 라이브러리는 이것이다.

🔗 https://www.npmjs.com/package/@gorhom/bottom-sheet

 

그리고 동일한 문제가 발생한 사람의 질문을 발견..

[v4] | [v2] BottomSheetModal failing to present on iOS · Issue #1560 · gorhom/react-native-bottom-sheet

 

 

 

해결방법

각 기기에서 애니메이션 간소화 옵션을 적용한 경우에 react-reanimated가 제대로 동작하지 않았다. (💢)

아래 옵션을 적용한 경우이며, 시뮬레이터에서 동일하게 설정하니 증상이 재현되었다.

- IOS: 설정 > 손쉬운 사용 > 동작 > 동작 줄이기

- Android: 설정 > 유용한 기능 > 애니메이션 줄이기

 

해결방법은 useReducedMotion이라는 훅을 사용하여 해당 기기가 간소화 옵션을 사용하는지 여부를 판단하여 애니메이션을 없애는 것이다.

import { useReducedMotion } from 'react-native-reanimated';
import { BottomSheetModal } from '@gorhom/bottom-sheet';

// ...

function MyComponent() {
    const reducedMotion = useReducedMotion();

    return <BottomSheetModal
        // ...
        animateOnMount={!reducedMotion}
    >
        // ...
    </BottomSheetModal>
}

 

 

근데 @gorhom/bottom-sheet 라이브러리에서 최근 해당 문제를 해결한 버전을 업데이트했다.

버전업을 해보면 useReducedMotion을 사용하지 않아도 될 것 같다. 아직 적용해보지는 않았다.

 

해결 끝 🥹