---
updatedAt: 2025-06-20T15:12:18.000Z
agentTools:
  projectIndex: https://airbridge.readme.io/llms.txt
---

# React native 하이브리드 앱 연동가이드

# 개요

***

React native 하이브리드 앱 연동 가이드에 대한 내용입니다. react native 에서 webview 를 사용하기 위해 몇몇 plugin 을 사용 할 수 있습니다. 해당 plugin 에 따른 사용방법이 다르기 때문에 javascript interface 를 활용하기 위한 method 를 제공합니다.

<br />

# interface

```javascript
let webInterface = Airbridge.createWebInterface(
        'YOUR_WEB_TOKEN',
        (command) => { 
            return `...`;
        }
    )
```

> `YOUR_WEB_TOKEN` 은 대시보드의 Settings > Tokens > 웹 SDK 토큰 에서 확인할 수 있습니다.

```javascript javascript
class WebInterface {
        
  public readonly script: string;

	handle(command: string): void;    
}
```

return 받은 `WebInterface` 를 통해 javascript interface 를 활용 할 수 있습니다.

<br />

# 이용가이드

아래는 react-native-webview 연동에 대한 내용입니다.

## react-native-webview [바로가기](https://github.com/react-native-webview/react-native-webview)

```javascript javascript
let webInterface = Airbridge.createWebInterface(
    'YOUR_WEB_TOKEN',
    (command) => { 
        return `window.ReactNativeWebView.postMessage(${command})`;
    }
)

const handleWebViewMessage = (event) => {
    const message = event.nativeEvent.data;
    webInterface.handle(message);
};

return (
    <WebView
        source={{ uri: 'YOUR_PAGE_URL' }}
        onMessage={ handleWebViewMessage }
        injectedJavaScript={ webInterface.script }
    />
);
```

1. web interface 를 생성한다. postCommandFunction 에 app 으로 native channel로 메세지를 보내는 javascript 를 작성한다.
2. native channel 로 도착한 메세지 처리할 메소드(`handleWebViewMessage`)를 정의 한다. 를 `handleWebViewMessage` 을 통해 native SDK 로 전달한다.
3. WebView 생성시 아래 사항을 처리한다.
   1. `onMessage` 에 `handleWebViewMessage` 를 넣어 준다.
   2. `injectedJavaScript` 에 생성된 webInterface 에서 injection 할 script (`webInterface.script`)를 넣어준다.