CODEWITHSUNDEEP
react-nativewebview
myTest532 myTest532
myTest532 myTest532

Reputation: 2381

React Native WebView not working IOS simulator

Does the WebView work in IOS simulator?

The code below does not return an error, but also doesn't display anything.

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyTest extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}

export default MyTest;

Thanks

Upvotes: 1

Views: 7612

Answers (4)

Mayowa Daniel
Mayowa Daniel

Reputation: 427

For me, the solution was to wrap my component that returned my WebView in a View with a set height OUTSIDE the file with the component that returns my WebView.

The wrapper View with the height should be in the file that component with the WebView was imported into. It took several takes and prayer but I finally found it out muahahaha!

Upvotes: 1

tksilicon
tksilicon

Reputation: 4426

I want to contribute here for those getting white screen on ios. First the webview is inside scrollview because I have other content. I know it is adviced for webview not to be inside any component. I was battling this for weeks until I came upon James Liu's. I was running it on expo client (ios) and was getting white screen. Here is my code before I saw his answer.

    contentContainerStyle={{
          flexGrow: 1,
      }}>

    <WebView
         ref={ref => (this.webview = ref)}

    source={{uri:  currentSite}}

    style={{  height:550}}

    scrollEnabled={true}
    startInLoadingState={true}


    onNavigationStateChange={this._onNavigationStateChange.bind(this)}
    javaScriptEnabled = {true}
    domStorageEnabled = {true}

    startInLoadingState={false}
    onLoad={() => this.hideSpinner()}

    injectedJavaScript={jsCode}
    onMessage={event => {

    //Html page
    const wishData = event.nativeEvent.data;
     this._getProductName(wishData);
     this._getProductPrice(wishData);

    }}

  />
  </ScrollView>

All I needed to add is useWebKit={true} and from the documentation it says:

useWebKit->If true, use WKWebView instead of UIWebView. And this props is ios specific. Furthermore, I googled and found that WKWebView is more recent than UIWebView ( I don't know more about this).

Upvotes: 1

Juan Rojas
Juan Rojas

Reputation: 1

The real problem is in the property startInLoadingState, you have to set this to true:

<WebView 
    startInLoadingState={true} />

Upvotes: 0

James Liu
James Liu

Reputation: 279

WebView work well in my simulator. My code:

<WebView 
useWebKit={true} 
style={{flex:1}} 
source={{uri:url}} 
startInLoadingState={true} 
renderLoading={()=>(<ActivityIndicator size='large' color={COLOR_STANDARD} 
style={{marginTop:100}} />)}>
</WebView>

Upvotes: 2

Related Questions