[React-Native] 통화기록 가져오기 과정에서 트러블슈팅(feat. typescript)

0. 환경

react-native : 0.70.6

react-native-call-log : 2.1.2

typescript : 4.8.3

macOS M1

 

1. 문제의 발생

react-native-call-log 라는 통화기록을 가져올 수 있는 react-native 패키지를 사용하다가 아래와 같은 에러를 만났다. 

https://github.com/wscodelabs/react-native-call-log

모듈 'react-native-call-log'에 대한 선언 파일을 찾을 수 없습니다.

종종 보이던 에러라 TS용 패키지 추가로 설치하면 되겠다 싶어서

yarn add @type/react-native-call-log

를 했는데... 

error An unexpected error occurred: "https://registry.yarnpkg.com/@type%2freact-native-call-log: Not found".

음... 암튼 TS용으로 만들어진게 없다는 말인거 같네요...

(이거 TS 모듈을 만들어서 npm에 배포해보는 프로젝트도 할 일 큐에 넣어보겠습니다)

 

2. 구조설명

통화기록에 엑세스하는 것에 대한 Permission을 담당하는 비동기 함수에서 허용여부를 반환하면

async function requestCallLogPermission() {
    if (Platform.OS === 'ios') {
      return false; // ios 미지원
    } else {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
        {
          title: '통화기록',
          message: '통화기록 엑세스 허용하시겠습니까?',
          buttonNeutral: '나중에',
          buttonNegative: '아니오',
          buttonPositive: '예',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        return true;
      } else {
        return false;
      }
    }
  }

통화기록을 가져오는 함수에서 위 함수의 출력값을 바탕으로 기록을 읽어온다.

const getCallLogs = () => {
    requestCallLogPermission().then(didGetPermission => {
      if (didGetPermission) {
        CallLogs.loadAll().then((callLog: any) => {
          console.log(callLog);
        });
      } else {
        console.log('No Permission123');
      }
    });
  };
  getCallLogs();

 

3. 문제의 원인

typescript를 위한 패키지의 부재

 

4. 문제의 해결

any type을 허용하는 방식으로 해결할 수 있을듯한데, 이번 프로젝트에서는 typescript를 빡빡하게 쓰고 싶어서 그 방법을 택하진 않았다.

 

1. tsconfig.json에 /@types 폴더 추가 선언

{
    ...

    "typeRoots": [
    "../node_modules/@types",
    "../@types"
    ]

    ...
}

 

2. root에 @types 폴더를 만들고, 안에 alltypes.d.ts 파일 추가

declare module 'react-native-call-log';

를 추가해준다

 

 

찾느라 고생한거에 비해서는 생각보다 간단하게 해결되었다. 모듈 정의가 안되어 있는 패키지에 대해서 직접 모듈 정의를 해주는 방식이다

declare module 관련 참고 자료 -> https://it-eldorado.tistory.com/127 

이외에도 이 모듈이 ios를 지원안해서 이것저것 찾아봤는데

애플은 타사앱에 보안이슈상 통화기록을 지원안한다고 한다...

그렇게 프로젝트는 안드로이드 전용으로..