한지 - 한조각 쓸모있는 지식 레터

cannot find symbol import android.support.v4.app.ActivityCompat;

react-native-iap를 설치하고

빌드하려보니 위의 에러가 나타났다.

검색결과

npx jetify
or
yarn jetify

위 두가지 명령어를 먼저

실행한 뒤

다시 빌드를 시도하면

정상적으로 진행되는 것을

확인할 수 있었다.

background processing 설정 후

빌드를 진행하는 도중

info.plist 설정 관련 에러가 발생했다.

 위 기능을 사용하기 위해서는

이 설정을 추가적으로 해주어야 한다.

react-native-audio

라이브러리를 적용중에

ios에서는 문제없지만

android에서 위와 같은 이슈가 발생하였다.

문제는 github에서도 논의 중

별다른 해결책 없이 끝난것같다

(github issue tracking: 링크)

에러 추적결과

위 문제는 필요한 권한이 부족하여 나타난 현상이었다.

위 문제 해결을 위해서는

react-native-permissions를 통해

라이브러리 사용전 필요한 권한 요청을

사용자로 부터 허락받아야한다.

const prepare = (path: string) => {
  const config = {
    SampleRate: 22050,
    AudioEncoding: 'aac',
    Channels: 1,
    AudioQuality: 'Low',
    AudioEncodingBitRate: 32000
  };
  
  return new Promise((resolve, reject) => {
    if (Platform.OS === 'android') {
      requestMultiple([
        PERMISSION.ANDROID.WRITE_EXTERNAL_STORAGE,
        PERMISSION.ANDROID.READ_EXTERNAL_STORAGE,
        PERMISSION.ANDROID.RECORD_AUDIO
      ]).then((isAuthorized) => {
        if (
          isAuthorized['android.permission.READ_EXTENRAL_STORAGE'] === 'denied'
          || isAuthorized['android.permission.WRITE_EXTENRAL_STORAGE'] === 'denied' 
          || isAuthorized['android.permission.RECORD_AUDIO'] === 'denied'
        ) {
          reject('no permission')
        } else {
          AudioRecorder.prepareRecordingPath(path, config);
          resolve('has permission')
        }
      })
    } else {
      AudioRecorder.prepareRecordingPath(path, config);
      resolve('has permission')
    }
  })
}

이런식으로

외부 저장소 읽기/쓰기, 오디오 레코딩 권한을 획득해야만

"Exception in native call from JS" 에러없이 진행할 수 있다.

위 에러를 겪었다.

https://github.com/software-mansion-labs/reanimated-2-playground/commit/71642dbe7bd96eb41df5b9f59d661ab15f6fc3f8

위 링크에 변경사항을 따라서

라이브러리 관련 작업을 해서

많은 사람들이 해결됐다고 하는데

나는  proguard설정에 따른 이슈였어서

아래의 코드를 추가해줌으로써

이슈를 해결할 수 있었다.

// android/app/proguard-rules.pro

-keep class com.swmansion.reanimated.** { *; }
-keep class com.facebook.react.turbomodule.** { *; }

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등의 라이브러리들과

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

제작중인 앱에서 파일을

다운로드/업로드 해야한다.

주요 라이브러리중

rn-fetch-blob를 선택하였는데,

써보기도전에 cycle warning이 발생했다.

구글링 결과

node_modules > rn-fetch-blob > polyfill > Blob.js, Fetch.js, XmlHttpRequest.js

3개 파일을 아래와같이 일부 수정해줌으로써

경고를 지울수있었다.

// import RNFetchBlob from '../index.js'
import { NativeModules } from 'react-native';

...

const RNFetchBlob = NativeModules.RNFetchBlob;
const log = new Log('XMLHttpRequest')

다만, 이렇게했을때는

재설치, 업데이트 등을 했을떄 다시 해당 문제가

발생할수 있어보인다.

필요하다면 라이브러리를 포크해

손봐서 써야될지도

Error during WebSocket handshake: Unexpected response code: 400

웹소켓 연동 중 이러한에러가 발생 + 서버가 느려지는 현상이 발생했다.

해결을 위해서는 nginx의 proxy파트에 추가적으로 다음과 같은 코드를 넣어줘야 한다.

proxy_http_version 1.1; 
proxy_set_header Upgrade $http_upgrade; 
proxy_set_header Connection "upgrade"; 
proxy_set_header Host $host; 

늘 그렇듯 버그에 직면하고 해결했습니다.

ios13의 다크모드가 나오면서

이와 와같이 날짜가 나타나지 않는 (사실은 하양글씨로 바뀌어서;;)

버그를 만났습니다.

* 해결방법

1. 먼저, 최신버전의 react-native-modal-datetime-picker를 설치해줍니다.

제, 기준으로는 7.6 이전버전입니다.

darkMode옵션이 추가됐지만 먹지않는 상황인데요.

2. react-native-appearance모듈도 설치해줍니다.

rn - npm install react-native-appearance / react-native link react-native-appearance

expo - expo install react-native appearance

3. node_module/react-native-modal-dateitme-picker로 찾아들어갑니다.

4. 상단에 코드를 두줄 추가해줍니다.

import { Appearance } from 'react-native-appearance';
const colorScheme = Appearance.getColorScheme();

5. darkmode를 체크하는 옵션을 넣어줍니다.

defaultProps부분의 darkmode옵션을 다음과 같이 설정하면 됩니다.

isDarkModeEnabled: colorScheme === 'dark',

6. 마무리로 유지보수 단계에서 버전업이 혹시나라도 될수있으니 package.json의 버전을 ^7.6과 같이 고정해줍니다.

7. 그래도 부족하니 ReadeME에 명시해줍니다.

8. 7.6이상의 버전에서는 node_module까지 가지않고 isDarkModeEnabled옵션을 사용하여 간단히 처리할 수 있습니다. ^^ 업데이트 하세요~

ubuntu가 빠르게 업데이트 되고있지만, apt package manager는 그렇지 못한것 같습니다.

node 버전이 8에 머물러있네요...

node버전 문제를 해결하는 방법은 nvm (node version manager)을 사용하는 것입니다.

nvm 설치 명령어

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

nvm install 버전 (ex. nvm install 12.13.0)

위의 명령어를 통해 최신버전의 node, npm 을 설치할 수 있습니다.

다만, 프로젝트의 의존성 모듈을 설치하는 중에 경우에따라 Missing write access to ... 와 같은 권한문제를 맞이할 수 있습니다.

해결책

프로젝트 폴더의 접근권한을 주는것입다

sudo chown -R $USER 폴더경로 및 폴더명

어렵지않게 위의 명령어로 깔끔하게 해결가능합니다.

* expo build error

expo 빌드를 진행하다보면 connect ECONNREFUSED 127.0.0.1:19001 라는 에러를 한번쯤 마주하게 됩니다...

start했던 expo가 비정상적으로 종료된 이후 빌드를 시도할 때, 이런경우가 종종 있는것으로 보입니다.

이때의 해결방법은 아주 간단합니다. expo를 실행시켰다가 다시 종료하는 것이죠.

1. expo start

2. ctrl + c (quit)

3. expo build:android(or ios) // 빌드 재시도