reactjsreact-nativewebviewwkwebview

Why is WebView in react native not opening?


using @react-native-community/react-native-webview package (v^8.1.2) to open a webview in a RN v0.61.5 project, no matter what I do, I cannot get the webview to display once the button is pressed. I have a button that opens it, but nothing happens. none of the error functions from the props executed, nothing.

here's the setup:

<Components.Button
    style={{ marginLeft: 15 }}
    text={"It's Copied. Continue"}
    type={'primary'}
    onPress={() => (
        <WebView
            style={{ flex: 0, height: height, width: width }}
            containerStyle={{ flex: 0, height: height, width: width }}
            automaticallyAdjustContentInsets={true}
            ref={(ref) => (this.webview = ref)}
            source={{ uri: 'https://connect.stripe.com/oauth/authorize?response_type=code&client_id=<....>&scope=read_write' }}
            originWhitelist={['https://*']}
            renderError={(error) => <View style={{ flex: 1 }}><Text>{error}</Text></View>}
            onError={syntheticEvent => {
                const { nativeEvent } = syntheticEvent;
                console.warn('WebView error: ', nativeEvent);
            }}
            onNavigatorStateChange={(event) => {
                if (event.url !== this.props.stripeUri) {
                    this.webview.stopLoading();
                    Linking.openURL(event.url);
                }
            }}
        />
    )}
/>

As you can see, the things ive tried:

No errors register in console, no new error view renders.

the last time I looked at this code it was working fine, not sure what happened. Any thoughts?

EDIT: link to snack: https://snack.expo.io/uTkqnGbny


Solution

  • here is my snack code

    https://snack.expo.io/sfDcMtiIR

    Code:

    import * as React from "react";
    import {
      Text,
      View,
      StyleSheet,
      TouchableOpacity,
      Linking,
      Dimensions,
    } from "react-native";
    import { WebView } from "react-native-webview";
    import Constants from "expo-constants";
    const { height, width } = Dimensions.get("window");
    const testURI = "https://google.com";
    
    export default function App() {
      const [isShowWebView, setIsShowWebView] = React.useState(false);
    
      return (
        <View style={styles.container}>
          <TouchableOpacity
            style={{
              height: 50,
              width: "100%",
              borderRadius: 50,
              justifyContent:"center",
              alignItems:"center"
            }}
            onPress={() => setIsShowWebView(!isShowWebView)} >
            <Text>Open Webview</Text>
          </TouchableOpacity>
    
          {isShowWebView && (
            <WebView
              style={{ height: height, width: width }}
              containerStyle={{ height: height, width: width }}
              ref={(ref) => (this.webview = ref)}
              source={{ uri: testURI }}
              renderError={(error) => (
                <View style={{ flex: 1 }}>
                  <Text>{error}</Text>
                </View>
              )}
              onError={(syntheticEvent) => {
                const { nativeEvent } = syntheticEvent;
                console.warn("WebView error: ", nativeEvent);
              }}
              onNavigatorStateChange={(event) => {
                if (event.url !== testURI) {
                  this.webview.stopLoading();
                  Linking.openURL(event.url);
                }
              }}
            />
          )}
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        paddingTop: Constants.statusBarHeight,
        backgroundColor: "#ecf0f1",
        padding: 8,
      },
    });