CODEWITHSUNDEEP
androidiosreact-nativewebviewexpo
new_reactjs
new_reactjs

Reputation: 228

How to refresh the webview content (react-native app)?

I have a react-native app (expo managed) and in this app I need to open a couple of webviews ( that are hosted on my website url). The issue is that when I update the content on the website, react-native webview still has the old website's content.

For example, react-native opens a webview page with a title Library, I've updated the title to Libraries and deployed the changes to my website, when I open the website (though phone/desktop) I see the title Libraries, but when I open the same page as the webview from the react-native app the title is still Library. If I delete and reinstall the react-native app then I see Libraries, I can't seem to figure out what may cause this issue.

This is my code:

import React, {useRef, useEffect} from 'react';
import { WebView } from 'react-native-webview';

const webViewRef = useRef();

useEffect(() => {
        
webViewRef.current.reload();

}, []);


WebView   
bounces={false}
ref={(ref) => (webViewRef.current = ref)}
source={{uri: "mywebsite"}}     
                
/>

Any advise or help is greatly appreciated

Upvotes: 1

Views: 2559

Answers (1)

new_reactjs
new_reactjs

Reputation: 228

I was able to fix this issue by passing a vavlue to the url,

import React, {useRef, useEffect,  **useState**} from 'react';
import { WebView } from 'react-native-webview';

const webViewRef = useRef();

**const [value, setValue] = useState()**

useEffect(() => {
        
webViewRef.current.reload();
*setValue(Math.random)*
}, []);


WebView   
bounces={false}
ref={(ref) => (webViewRef.current = ref)}
source={{uri: **`mywebsite?var=${value}`**}}

This allows webview url to refresh on page load

Upvotes: 2

Related Questions