---
title: Handle platform differences
---
import { SnackInline, Terminal } from '~/ui/components/Snippet';
import Video from '~/components/plugins/Video';
import { LinkBase } from '~/ui/components/Text';
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:
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**:
```jsx 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**:
{/* prettier-ignore */}
```jsx App.js
import { StyleSheet, View, /* @info Import the Platform module from react-native. */ Platform /* @end */ } from 'react-native';
```
Inside the `onSaveImageAsync()` function in the `` 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 `` as a JPEG image.
{/* prettier-ignore */}
```jsx
const onSaveImageAsync = async () => {
/* @info Add the if condition here to check whether the current platform is web or not. */ if (Platform.OS !== 'web') { /* @end */
try {
const localUri = await captureRef(imageRef, {
height: 440,
quality: 1,
});
await MediaLibrary.saveToLibraryAsync(localUri);
if (localUri) {
alert('Saved!');
}
} catch (e) {
console.log(e);
}
} /* @info Add an else condition to run the logic when the current platform is the web. */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);
});
} /* @end */
};
```
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](/tutorial/configuration).