airbridge-react-native-sdk/qa/source/pages/Browse.js

Airbridge SDK for React Native

import React, { Component } from 'react'

import { View } from 'react-native'
import ImageButton from '../component/ImageButton'

import UrlInputDialog from '../component/UrlInputDialog'
import InjectInputDialog from '../component/InjectInputDialog'
import MessageDialog from '../component/MessageDialog'

import { WebView } from 'react-native-webview'
import { Airbridge } from 'airbridge-react-native-sdk'

export default class BrowsePage extends Component {

  constructor(props) {
    super(props);
    
    this.defaultQASource = 'https://sdk-download.airbridge.io/airbridge-web-sdk-qa-library/latest/AirbridgeQALibrary/index.html'
    this.postMessageScript = `window.ReactNativeWebView.postMessage(payload)`
  
    setTimeout(async () => {
      let script = await Airbridge.createWebInterfaceScript(this.state.webToken, this.postMessageScript)
      this.setState({script: script})
    }, 0)

    this.state = {
        source: this.defaultQASource,
        webToken: '46bbd826f96e49ca92f04daf0d816f95',
        script: '',
        info: ''
    };

    this.webviewRef = React.createRef()
    this.urlRef = React.createRef()
    this.injectRef = React.createRef()
    this.infoRef = React.createRef()
  }

  inits

  handleWebViewMessage = (event) => {
      console.log('Message received from web page:', event.nativeEvent);

      const command = event.nativeEvent.data;
      Airbridge.handleWebInterfaceCommand(command)
  }


  render() {
    return (
      <View style={{flex: 1}}>
        <WebView
          ref={this.webviewRef}
          source={{ uri: this.state.source }}
          onMessage={ this.handleWebViewMessage }
          webviewDebuggingEnabled={true}
          injectedJavaScript={ this.state.script } />
        
        <View style={{ flexDirection: 'row'}}>
          <ImageButton
            source={require('./../../resource/refresh.png')}
            accessibilityLabel={'browseReload'}
            onPress={() => {this.webviewRef.current.reload()}} />
          <View style={{ margin: 4 }} />
          <ImageButton
            source={require('./../../resource/home.png')}
            accessibilityLabel={'hybridTestPage'}
            onPress={() => this.setState({source: this.defaultQASource})} />
          <View style={{ margin: 4 }} />
          <ImageButton
            source={require('./../../resource/link.png')}
            accessibilityLabel={'browseUrl'}
            onPress={() => {this.urlRef.current.show()}} />
          <View style={{ margin: 4 }} />
          <ImageButton
            source={require('./../../resource/token.png')}
            accessibilityLabel={'injectWebToken'}
            onPress={() => { this.injectRef.current.show() }} />
          <View style={{ margin: 4 }} />
          <ImageButton
            source={require('./../../resource/info.png')}
            accessibilityLabel={'info'}
            onPress={() => {
              var log = ''
                log += 'url : ' + this.state.source.toString() + '\n\n'
                log += 'webToken : ' + this.state.webToken.toString() + '\n'
              this.setState({
                info : log
              })
              this.infoRef.current.show()
            }} />
        </View>
        
        <UrlInputDialog 
          ref={this.urlRef}
          onConfirm={(value) => this.setState({source: value})} />
        <InjectInputDialog 
          ref={this.injectRef}
          onConfirm={(value) => {
            this.setState({
              script: Airbridge.createWebInterfaceScript(webToken, this.postMessageScript),
              webToken: value
            })
            this.webviewRef.current.reload()
          }} />
        <MessageDialog
          ref={this.infoRef}
          title={'info'}
          accessibilityLabel={'info'}
          autoClose={false}
          message={this.state.info} />
      </View>
    )
  }
}