카카오 내비 리엑트 네이티브 모듈 만들기 ft.코틀린

      
사용자를 카카오 내비로 이동시키는 기능이 최근 카카오네비 딥링크가 막혀서 더이상 사용하지 못하는 이슈가 있었습니다.


카카오 SDK 를 포팅한 React Native 모듈이 있는지 찾아보았으나 대부분은 Out-Dated 된 모듈들이어서 새로 만들기로 하였습니다.


A~Z 까지 모든것을 설명하려는 것은 이 포스팅의 목적이 아니고, 개인적으로 조금 헤매었던 부분을 정리하고자 합니다.


### create react native module



React Native 공식 문서에도 나와있듯 모듈을 쉽게 만들기 위해 이미 보일러 플레이트가 완성되어있는 코드를 베이스로 삼아 만들어 줍니다.

```

npx create-react-native-library@latest react-native-awesome-module

```





### react module 에서 app context 사용 방법



SDK 문서에 따르면 사용자 기기에 카카오내비 앱의 설치 유무를 확인하기 위해서 아래와 같은 코드를 사용할 수 있습니다.

```

if (NaviClient.instance.isKakaoNaviInstalled(context)) {
    Log.i(TAG, "카카오내비 앱으로 길 안내 가능")
} else {
    Log.i(TAG, "카카오내비 미설치")
}

```



하지만 안드로이드 네이티브가 아닌 우리는 리엑트 네이티브의 모듈을 가져와서 context 로 넣어주어야 하고 이는 네이티브 모듈에서 아래와 같이 잡아올 수 있습니다.



```

class KakaoNaviModule(reactContext: ReactApplicationContext) :

  ReactContextBaseJavaModule(reactContext) {



  private var context: Context = reactContext.getApplicationContext()

```




### module 시작 시 초기화 값 설정 방법
KakaoNaviModule 클래스의 init 과 reactContext 를 사용하여 값을 초기화합니다.

```

init {

    val kakaoAppKey = reactContext.resources.getString(

      // 프로젝트의 xml value 가져오기

      reactContext.resources.getIdentifier("kakao_app_key", "string", reactContext.packageName)

    )



    KakaoSdk.init(context, kakaoAppKey)

  }

```



### kakao sdk 를 설치했으나 example 에서는 디펜던시를 가져오지 못함



```

allprojects {

    repositories{

        mavenLocal()

        maven {

            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

            url("$rootDir/../node_modules/react-native/android")

        }

        maven {

            // Android JSC is installed from npm

            url("$rootDir/../node_modules/jsc-android/dist")

        }



        google()

        jcenter()



        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/'}

    }

}



```