react-native-reanimated 에러 모음

1. 설치 관련

Docs에 따르면 앱을 설치한 뒤

babel.config.js를 수정해주어야 한다.

이 때 잘못 설정하면 에러가 발생한다.

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        'babel-plugin-styled-components',
        [
            'module-resolver',
            {
                root: ['.'],
                extensions: [
                    '.ios.ts',
                    '.android.ts',
                    '.ts',
                    '.ios.tsx',
                    '.android.tsx',
                    '.tsx',
                    '.jsx',
                    '.js',
                    '.json',
                ],
                alias: {
                    '@components': './src/components',
                    '@utils': './src/utils',
                    '@interface': './src/interface',
                    '@stack': './src/stack',
                    '@api': './src/api',
                    '@containers': './src/containers',
                    '@libs': './src/libs',
                    '@screens': './src/screens',
                    '@images': './src/images',
                },
            },
            // 'react-native-reanimated/plugin', <-- 여기 아님, 절대 아님
        ],
        'react-native-reanimated/plugin',
    ],
};

추가시 위치에 조심하자

특히, 반드시 맨 뒤에 삽입해야한다.

 

 

2. Freezing 현상

설치하고나니 랜덤하게 앱이 멈춰버리는 현상이 나타났다.

이슈를 뒤져보니 Freezing 관련한 글이 있었다.

https://github.com/software-mansion/react-native-reanimated/issues/1875

 

해결을 위해서는 

설치된 버전을 제거하고

react-native-reanimated@2.2.3 버전을 설치해주어야한다.

이 에러는 react-native-modal이나 react-navigation등의 라이브러리들과

충돌로인해 발생한다고한다.