Guides
Plan-enterprise-icon
Expo Application Services
API Reference

Handle platform differences

Android, iOS, and the web have different capabilities. In our case, Android and iOS both are able to capture a screenshot with the react-native-view-shot library, however web browsers cannot.
In this chapter, let's learn how to make an exception for web browsers to get the same functionality on all platforms.

Step 1: Install and import dom-to-image

To capture a screenshot on the web and save it as an image , we'll use a third-party library called dom-to-image. It allows taking a screenshot of any DOM node and turning it into a vector (SVG) or raster (PNG or JPEG) image.
Stop the development server and run the following command to install the library:
Terminal
→ npm install dom-to-image
After installing it, make sure to restart the development server and press w in the terminal.
To use it, let's import it into App.js:
App.js
import domtoimage from 'dom-to-image';

Step 2: Add platform-specific code

React Native provides a Platform module that gives us access to information about the platform on which the app is currently running. e can use it to implement platform-specific behavior.
Import the Platform module in App.js:
App.js
import { StyleSheet, View, Platform } from 'react-native';
Inside the onSaveImageAsync() function in the <App> component, we'll use Platform.OS to check whether the platform is 'web'. If it is not 'web', we'll run the logic added previously to take and save the screenshot. If it is 'web', we'll use the domtoimage.toJpeg() method to convert and capture the current <View> as a JPEG image.
Take a screenshot
const onSaveImageAsync = async () => {
  if (Platform.OS !== 'web') {
    try {
      const localUri = await captureRef(imageRef, {
        height: 440,
        quality: 1,
      });
      await MediaLibrary.saveToLibraryAsync(localUri);
      if (localUri) {
        alert('Saved!');
      }
    } catch (e) {
      console.log(e);
    }
  } else {
    domtoimage
      .toJpeg(imageRef.current, {
          quality: 0.95,
          width: 320,
          height: 440,
        })
      .then(dataUrl => {
        let link = document.createElement('a');
        link.download = 'sticker-smash.jpeg';
        link.href = dataUrl;
        link.click();
      })
      .catch(e => {
        console.log(e);
      });
  }
};
On running the app in a web browser, we can now save a screenshot:

Up next

The app does everything we set out for it to do, so it's time to shift our focus towards the purely aesthetic. In the next chapter, we will customize the app's status bar, splash screen, and app icon.
  • Message-iconAsk a question on the forums
  • Edit-iconEdit this page

Was this doc helpful?