Ajustar WebView width: 100% en React Native

Tiempo de lectura: < 1 minuto

El plugin react-native-webview tiene un issue que no permite adaptar a pantalla al 100% mediante style. En este caso lo hemos instalado usando Expo.

Hay que recordar también qué este plugin solo funciona en Android o iOS y no en Web.

Por eso sí ponemos el style:

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

Al ejecutarlo en un terminal no mostrará la pantalla cargada.

Para que funcione tenemos que importar Dimensions:

import { Dimensions } from "react-native";

Y ahora utilizando JavaScript podemos obtener el width de la pantalla usando esta propiedad:

Dimensions.get('window').width;

Entonces, para que el código funcione y el webview se adapte a la pantalla, tendremos que poner lo siguiente:

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