Problem

React-Native에서 WebView1를 이용할 경우 (특히 안드로이드에서) Intent가 동작하지 않는 경우가 있다. 대표적으로 많이 사용하는 카카오링크 공유하기 기능을 사용할 때 카카오 JavaScript SDK에서는Intent로 카카오 링크를 전송하는데 WebView에 이 기능이 구현 되있지 않으면 아래와 같은 net::ERR_UNKNOWN_URL_SCHEME 에러 메시지를 보게 될 것이다.

Solution

React-Native에서는 이를 해결하기 위해서는 먼저 react-native-send-intent2 를 설치해야 한다.

npm install react-native-send-intent --save
yarn add react-native-send-intent

그리고 프로젝트와 연결 해준다.

react-native link react-native-send-intent
const onShouldStartLoadWithRequest = (event) => {
    if (
      event.url.startsWith('http://') ||
      event.url.startsWith('https://') ||
      event.url.startsWith('about:blank')
    ) {
      return true;
    }
    if (Platform.OS === 'android') {
      const SendIntentAndroid = require('react-native-send-intent');
      SendIntentAndroid.openChromeIntent(event.url)
        .then(isOpened => {
          if (!isOpened) { alert('앱 실행이 실패했습니다'); }
        })
        .catch(err => {
          console.log(err);
        });

      return false;

    } else {
      Linking.openURL(event.url)
      .catch(err => {
        alert('앱 실행이 실패했습니다. 설치가 되어있지 않은 경우 설치하기 버튼을 눌러주세요.');
      });
      return false;
    }
  };
/>
<WebView
  onShouldStartLoadWithRequest={event => {
    return onShouldStartLoadWithRequest(event);
  }}
  ...
/>

react-native-send-intent는 그 외에도 카메라 앱이나 이메일 앱 또는 다운로드 매니저 같은 외부 앱을 실행할 수 있어서 유용하다3.

References