Why is WebView in react native not opening? - reactjs

Question

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:
setting flex:0 with a specified height, width
whitelisting uri with wildcard
setting various error props
re-running pod install
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

Answer 1

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,
},
});

Answer 2

I think i know what you want.
I createfd a state var to we toggle the web view using the button.
Please try my snack (using Android or iOS).
https://snack.expo.io/lYItc9ACk
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 [showWebView, setShowWebview] = React.useState(false);
return (
<View style={styles.container}>
<TouchableOpacity
style={{width:'90%', height: 50, backgroundColor:'#333', borderRadius: 50, alignSelf: 'center'}}
onPress={() => setShowWebview(!showWebView)}
>
</TouchableOpacity>
{ !!showWebView &&
<WebView
style={{ flex: 1, height: height, width: width }}
containerStyle={{ flex: 1, 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,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});

Answer 3

Remove the entire styling and just go with source: uri