Force React Native Web View to Ignore cached version of webview

Question

Context

Currently working a HTML & JS heavy project that is a react native project. All HTML & JS are referenced locally (nothing over http).

Problem

Whenever I make changes to HTML or JS I don't see the changes (after refreshing the native code or simply running it again) so I'm forced to completely uninstall the app.

Question

Is there a way to ignore the cached version of these files (am assuming a caching mechanism exists)

I haven't found any valid resource regarding this topic, so any feedback would be greatly appreciated, thanks.

did you found and solution, i am facing same problem in my react native app. — Ravi Bhandari
– Ravi Bhandari, Commented Feb 5, 2021 at 9:38

Community · Accepted Answer · 2017-05-23 12:18:24Z

5

I am assuming that you are using React Native's WebView component to render your HTML and JavaScript. This component relies on the native UIWebView and WebView components, so you can modify the RN WebView using the same procedures as for those. For example, in the iOS case, you can do the following:

[[NSURLCache sharedURLCache] removeAllCachedResponses];
[[NSURLCache sharedURLCache] setDiskCapacity:0];
[[NSURLCache sharedURLCache] setMemoryCapacity:0];

You can put that code in your didFinishLaunchingWithOptions method of AppDelegate.m. Based on this answer.

In the Android case you cannot access the cache unless you have access to the WebView's instance (according to this answer), so what you can do is create your own WebView using the code of the RN WebView combined with the cache-deleting functionality. It's not as complicated as it might seem.

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Dec 14, 2016 at 15:42

martinarroyo

9,7713 gold badges42 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jim · Accepted Answer · 2020-03-31 21:44:10Z

4

Looking at the WebView.android.js file (node_modules/react-native-webview/lib/WebView.android.js), there is a property in WebView.defaultProps called cacheEnabled and it is set to true.

You could try setting the cacheEnabled property to false in your WebView JSX:

<WebView
   cacheEnabled={false}
   source={{ uri: env.APP_URL }} style={{flex:1}} />

answered Mar 31, 2020 at 21:44

Jim

1,1089 silver badges12 bronze badges

2 Comments

Sagar H Over a year ago

Will it work when there is no internet connectivity ?

Jim Over a year ago

@Sagar, I haven't tested that, but probably not. With the cache disabled, the assets wouldn't exist locally.

onmyway133 · Accepted Answer · 2019-01-21 10:18:41Z

1

For me, I used https://github.com/joeferraro/react-native-cookies, and it does clear the cookies for me. Call the following before you use WebView

CookieManager
  .clearAll(true)
  .then((res) => {
    console.log('LoginScreen CookieManager.clearAll =>', res)
  })

answered Jan 21, 2019 at 10:18

onmyway133

48.5k33 gold badges268 silver badges273 bronze badges

Comments

Kyle Shrader · Accepted Answer · 2017-05-20 06:19:14Z

0

For android, the "App info" setting, under Storage will allow you to clear cache. This is how you can force a reload of any resources you are displaying in the WebView.

answered May 20, 2017 at 6:19

Kyle Shrader

96211 silver badges16 bronze badges

1 Comment

em_ Over a year ago

This might be a quicker alternative, but I was hoping to find a configuration in the RN project itself.

Collectives™ on Stack Overflow

Force React Native Web View to Ignore cached version of webview

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related