Search code examples
react-nativereact-native-webview

React-Native WebView open Google Docs remove header


When launched Google Docs in WebView I want to disable the Google Docs Header. When I was coding with Swift, I had to disable JavaScript. So I tried the same method but it does not work. How do I remove the Google Docs header from React-Native WebView?

import React, { Component } from 'react';
import { StyleSheet,View,WebView } from 'react-native';
import {
  Container, Header, Left, Button, Icon, Content,Text
} from 'native-base';


const styles = StyleSheet.create({
  wrapper: {
    justifyContent: 'center',
    flexDirection: 'column',
    flex: 1,
  },
});

class WebViewContainer extends Component {

  render() {
    return (
      <View style={styles.wrapper}>
      <Container>
      <Header />
        <Content scrollEnabled={false} contentContainerStyle={styles.wrapper}>
        <Text>text</Text>
          <WebView
            injectedJavaScript={false}
            javaScriptEnabled={false}
            originWhitelist={['*']}
            source={{ uri: 'https://docs.google.com/document/d/1VyuUU550TtZNMpX31z9lRSrYFABkthLXi-4qfheq4GU/edit?usp=sharing' }}
          />
          <Text>text</Text>
        </Content>
      </Container>
      </View>
    );
  }
}

export default WebViewContainer;

https://snack.expo.io/r1mBAV-64


Solution

  • The problem is that javaScriptEnabled does not apply to IOS.

    You can modify react-native-webview so that javaScriptEnabled is applied.

    https://github.com/aksmfosef11/react-native-webview/tree/add-javascriptEnabled-in-IOS

    This feature has also been added to the master. Get the

    https://github.com/react-native-community/react-native-webview