React Native: Why Your WebView Disappears inside a ScrollView

Placing a WebView inside a Scrollview can be problematic. The problem you would immediately come across is the WebView mysteriously disappearing. It IS in fact rendered but merely with a 0px height as it has not inherited the containing ScrollView height.

Why would I want to do this?

I’m glad you asked. You might be wondering because WebViews naturally support scrolling with scrollEnabled=true . So, it does sound odd why you would wrap it in a ScrollView for this reason alone. You are correct, if that’s all you need then you should stop here. There is no need to complicate things.

There are however many legitimate reasons. I think by far the most popular is when you want a hero banner or a nice native carousel above the WebView content and would like the native elements and WebView to scroll smoothly. If this sounds like you then read on!

How not to do it!

To resolve the issue you might have tried this:

<ScrollView contentContainerStyle={{flexGrow:1}}>
  <WebView />
</ScrollView>

Yes, there is a contentContainerStyle which is applied to the actual View inside the ScrollView that encapsulates child components. This is one step closer to what we’re looking for since now you can actually see the WebView as it is inheriting the ScrollView height correctly.

However, this is NOT what I consider a working solution as the results are undesirable. If the webpage inside the WebView is taller than the WebView itself the rest of the webpage content is cutoff. Another undesirable result is the inner scroll. The WebView and ScrollView are now both scrollable and interfering with each other. Some developers may try to solve this by disabling WebView scrolling and setting a height to the WebView that is really high in value in order to accommodate the contained webpage content. Again, this is not what I call a solution. That’s just plain laziness!

So what’s the solution smart arse?

Well, you know how not to do it, and you already know the pitfalls and some half working solutions. Since we already know that the WebView inherits its height from its container and we know that if we set the WebView height tall enough and disable scrolling we will be able to view the entire page up to the set height.

Setting the height is the key, however, it needs to be set dynamically based on the height of the dynamically loaded webpage content. To do this, we first need to determine the height of the webpage and then somehow relay this message back to the Native side so it could update the WebView height.

We could put a snippet of JavaScript at the bottom of the webpage page with a postMessage trigger and tell it the page’s body height using DOM properties scrollHeight and offsetHeight:

window.ReactNativeWebView.postMessage(
  Math.max(document.body.offsetHeight, document.body.scrollHeight)
);

It’s not always viable to put a snippet in a webpage specific to RNWebView as the webpage might also be served in a browser or published by a third-party. Luckily you don’t have to. You could use WebView’s injectedJavascript to inject this snippet dynamically. Here’s how the solution looks like now:

<ScrollView contentContainerStyle={{
  flexGrow: 1,
  height: webViewHeight 
}}>
  <WebView
    scrollEnabled={false}
    onMessage={onMessage}
    injectedJavaScript={injectedJavaScript}
  />
</ScrollView>

Where:

const [webViewHeight, setWebViewHeight] = React.useState(null);
const onMessage = (event) => {
  setWebViewHeight(Number(event.nativeEvent.data));
}
const injectedJavaScript=`
  window.ReactNativeWebView.postMessage(
    Math.max(document.body.offsetHeight, document.body.scrollHeight)
  );
`

That’s it! As simple as that!

Thank you!

Thanks for reading to the end. Here’s a bonus for those who bothered to get this far! Here’s a fully working Expo Snack example that you can run on a real device and for you to clone, play and break!

Further Notes

• The injected JavaScript snippet is only valid for the first rendered webpage. If your WebView supports browsing then you will have to re-inject the snippet again on each page load.

References:

• https://github.com/react-native-community/react-native-webview/issues/413
• https://github.com/facebook/react-native/issues/20347
• https://github.com/react-native-community/react-native-webview/issues/22

curl -X POST \
  https://my.api.com/users.json \
  -H 'Accept: application/json' \
  -H 'Content-Type: multipart/mixed' \
  -F 'user[avatar]=@/absolute/path/to/avatar.jpg' \
  -F 'user[full_name]=Ca-Phun Ung'

React Native WebView allows you to load a publicly accessible resource with the uri property. It works just as a usual website inside an in-app browser. However, it’s not so cut-and-dry when you want to serve it locally as a SPA or static HTML site.

Defining the Problem

There are many solutions across the Web on how to serve a site locally from the users device, but most are partial solutions with limited functionality, or fall short of what’s really required to serve a full fledged static site such as ones generated from CRA.

The criteria of a working solution is:

• a site served as ./path/web.html should be no different to one served as http://mysite.com/path/web.html .
• url parameters should work if passed to the local site, as it should to any typical site.
• all static resources such as HTML, JS, CSS, images, and fonts must be stored in the app–without external dependencies–to support offline mode.
• must work the same for both Android and iOS.
• assets must be served from a single location for all platforms to avoid unnecessary duplication.

As I explored the various solutions to embed a fully working Local Site within a WebView, I realised there is no solution out there that satisfied the above criteria, so I set out to devise one.

Devising the Solution

Many hours of googling and experimentation lead me to a few critical finds, which form the basis of the entire solution:

1. Any folder named with a .bundle extension is seen has a package in Xcode. The contents of the package could be changed any way you want, without affecting the complicated file references Xcode uses to track assets.
2. In Xcode you can add folder groups that are linked by reference. i.e. Assets do not have to reside within the ios/MyReactNativeApp folder.
3. Android Studio allows you to add multiple Asset folders, and the folder could even be relative to the android/app folder.

These nuances have worked wonders for me and my team. We’ve been using this approach since late 2017–I think it’s about time we shared our findings to the world–as this method has been tried and tested enough in many of our production apps.

If you prefer to read code and figure it out yourself, I made a working example on github:

caphun/react-native-webview-example

If you don’t mind all the waffling, then please read on, as I finally get down to the nitty gritty of the solution, and take you through a step by step…

Step 1 — Setup Web Assets Folder

Create a html folder in your RN project root and add a folder named Web.bundle . It should look like this:

Next, you need to setup the Android and iOS projects so that they recognise the Web.bundle folder.

To setup iOS — open the ios folder and double-click the xcodeproj (or xcworkspace if you have one) project file to launch Xcode. Click on the Project Navigator and expand the first folder named after your project name. Have the Finder side-by-side, then drag-in the Web.bundle folder. It should look like this at the end:

When you drop the folder, a dialog will appear. Make sure “Copy items if needed” is unchecked.

To setup Android — open path/to/project/android/app/build.gradle file in your editor and add this line inside the android clause like so:

android {
  ...
  sourceSets { 
    main { assets.srcDirs = ['src/main/assets', '../../html'] } 
  }
}

Alternatively, you could create the assets folder in Android Studio – When “Change Folder Location” checkbox appears, click it and input ../../html .

Step 2 — Add Launcher and Site Files

When pointing the Source URI of a WebView to local file resource, there is a major gotcha moment! If you point to {uri: ‘...index.html’} the resource loads without issue but once you pass a parameter,
e.g. {uri: ‘...index.html?platform=ios’} , RN WebView will show error like this:

To overcome this issue, add a loader.html file toWeb.bundle/loader.html with a single link tag:

<a id="progress-bar" href="#"></a>

This will be used in the next Step, more about that later!

Next, add the actual static local site files to Web.bundle/site/ or any folders and files you wish. You should end up with a structure similar to this:

Step 3 — Putting it all together

Now, you should be all set with project files configured and a Local Static Site in place. In this final step I will show you how to glue these things together.

In Step 1 we setup the Web.bundle so that in iOS you could reference the launcher asWeb.bundle/loader.html and Android as file:///android_asset/Web.bundle/loader.html , see below:

const sourceUri = (
  Platform.OS === 'android' 
    ? 'file:///android_asset/' 
    : ''
) + 'Web.bundle/loader.html';

Now, here’s the BIG reveal! Remember in Step 2 you added the launcher file? Well, that’s so we could inject some javascript on initial launch. Yes, it’s a hack! And sorry if this feels like trickery, but a necessary evil in order to pass in launch parameters (which are so very important :), see below:

const params = 'platform='+Platform.OS;

const injectedJS = `
  if (!window.location.search) {
    var link = document.getElementById('progress-bar');
    link.href = './site/index.html?${params}';
    link.click();
  }
`;

You may notice in the above snippet I have a !window.location.search condition. That’s to avoid the issue below which occurs only in iOS (as of writing react-native-webview is version 3.1.2):

And finally, for best results the WebView should be used with properties specified like so:

return <WebView
  injectedJavaScript={injectedJS}
  source={{ uri: sourceUri }}
  javaScriptEnabled={true}
  originWhitelist={['*']}
  allowFileAccess={true}
/>;

Still here? There’s nothing more to say other than, as mentioned earlier I have a working example on github, clone it, play with it, break it and give feedback!

caphun/react-native-webview-example

Further Notes

• As of RN0.56.0 the injectedJS hack is not required for Android. Source URI’s to local resources could be directly linked with URL parameters.
• You can avoid the injectedJS hack by using postMessage interface instead. However, you need to setup WebView bridging to facilitate communication between Native and HTML.

However, if you sometimes find yourself having to quickly parse a simple query string whilst trying not to introduce external libraries that would pile on the kilobytes, here’s a stab at reduction:

(window.location.search.match(/([^=?&]+=[^&]+)/g)||[]).reduce(function(a,b) {
  a[b.split('=')[0]] = b.split('=')[1];
  return a; 
}, {});

With arrow functions and Object.assign we end up with one line!

(window.location.search.match(/([^=?&]+=[^&]+)/g)||[]).reduce((a,b) => Object.assign(a, {[b.split('=')[0]]: b.split('=')[1]}), {})

Can you make this any shorter?