1import React from 'react';
2import { ActivityIndicator, View, StyleSheet } from 'react-native';
3import { WebView } from 'react-native-webview';
4
5interface MessageEvent {
6  nativeEvent: {
7    data: string;
8  };
9}
10
11const injectedJavaScript = `window.ReactNativeWebView.postMessage(JSON.stringify(window.location));`;
12
13export default class WebViewScreen extends React.Component {
14  static navigationOptions = {
15    title: 'WebView',
16  };
17
18  state = {
19    loading: true,
20  };
21
22  handleLoadEnd = () => this.setState({ loading: false });
23
24  handleMessage = ({ nativeEvent: { data } }: MessageEvent) => {
25    console.log('Got a message from WebView: ', JSON.parse(data));
26  };
27
28  render() {
29    return (
30      <View style={styles.container}>
31        <WebView
32          source={{ uri: 'https://expo.io/' }}
33          onLoadEnd={this.handleLoadEnd}
34          onMessage={this.handleMessage}
35          injectedJavaScript={injectedJavaScript} />
36        {this.state.loading && <ActivityIndicator style={StyleSheet.absoluteFill} />}
37      </View>
38    );
39  }
40}
41
42const styles = StyleSheet.create({
43  container: {
44    flex: 1,
45  },
46});
47