React native Question posted in
The official React Native documentation can be found here.

React native – How do I make a WebView display even when offline?

I want a WebView component to display both when online and offline. When online, I want it to use the url I have provided. I want the locally saved/Cached so it can also be displayed when offline. Here’s a code example:

`import React from 'react';    
import { View, Text, StyleSheet } from 'react-native';    
import WebView from 'react-native-webview';    

function App() {    
  return (    
    <WebView style={styles.container}    
      source={{ uri: 'https://wikipedia.org' }}      //a random example
    />    
  );    
};    

const styles = StyleSheet.create({    
  container: {    
    flex: 1,    
    backgroundColor: '#fff',    
    alignItems: 'center',    
    justifyContent: 'center'    
  },    
})    

export default App;`

I tried using different dependencies but failed. I’m pretty new to react-native, please don’t make it too complex when answering.

Tags:

2

Answers


  1. 0

    If I got it right you want to conditionally chose between an external URL and a local file, depending if you’re online or not.

    As described in this answer to a previous question you can import netInfo from react-native-community and check through netInfo.isConnected.

    Since you’re not using react-native-community you can insert netinfo separately into your project:

    yarn add @react-native-community/netinfo

    or

    npm install --save @react-native-community/netinfo

    Then you can change the source parameter of your WebView component as described in this answer to a previous question.

    So the code goes like the following:

    import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useNetInfo } from "@react-native-community/netinfo"; 
import WebView from 'react-native-webview';    

function App() {
  const { isConnected } = useNetInfo();
  const localSource = require("./resources/index.html")

  return (    
    <WebView style={styles.container}    
      source={ isConnected ? { uri: 'https://wikipedia.org' } : localSource }
    />    
  );    
};    

const styles = StyleSheet.create({    
  container: {    
    flex: 1,    
    backgroundColor: '#fff',    
    alignItems: 'center',    
    justifyContent: 'center'    
  },    
})    

export default App;

    If you need help undersing the line source={ isConnected ? { uri: 'https://wikipedia.org' } : localSource } you can read more about Conditional Operator here.

    Login or Signup to reply.
  2. 0

    I think you are talking about caching right?

    <Webview cacheEnabled={true} />

    But, you don’t need that because the default is true

    https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#cacheenabled

    First, you have to understand…

    • The user needs to load the caches (online)
    • Then when the user is offline, so use the cache (Your target website needs to do that)

    BTW: I don’t think you need to show the diff URLs between online/offline, because the WebView will show the message anyway.

    But you can play around source (which is another question)

    <WebView
  source={{ html: '<h1>This is a static HTML source!</h1>' }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search