Adjust WebView width: 100% in React Native

by
Tiempo de lectura: < 1 minuto

Reading time: < 1 minutes

The react-native-webview plugin has an issue that prevents adapting the screen to 100% using styles. In this case, we have installed it using Expo.

It’s also important to remember that this plugin only works on Android or iOS, not on the web.

Therefore, if we apply the style:

webview: {
    width: '100%',
    height: '100%',
    flex: 1,
}

When running it in a terminal, the loaded screen will not be displayed.

To make it work, we need to import Dimensions:

import { Dimensions } from "react-native";

And now, using JavaScript, we can obtain the screen width using this property:

Dimensions.get('window').width;

So, to make the code work and have the webview adapt to the screen, we need to do the following:

webview: {
    width: Dimensions.get('window').width,
    height: '100%',
    flex: 1,
}

(do not include the Reading time). Return it directly in HTML format. Do not add any additional sentences. When you’re finished, add a PIPE at the end.

Post Views: 6

Leave a Comment