Skip to content
Advertisement

React Native change the zoom of iframe using WebView

Hello,

It is frst time I am using React Native you could say and trying to use the WebView from the react-native-webview library. Inside the WebView I have a iframe tag that I want it to strect out like the mobile version in the website. The result ends with really small frame or zoomed out frame. Check the picture below.

How it looks like when it is small When it is zoomed out

I am trying to make it look like this from their website:

How I want it to look like

Here is the source code when the frame is small:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
    return (
        <View style={{ height: '100%', width: '100%' }}>
            <WebView
                source={{ html: '<iframe src="https://app.waiteraid.com/reservation/?app_type=bokabord&hash=f6dbbb53f2cbbafdf35e3b82115d411a&gaci=" allowfullscreen></iframe>' }}
                style={{ marginTop: 40, marginBottom: 40 }}
            />
        </View>
    );
}

Here is the code when it is zoomed out:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
    return (
        <WebView
            source={{ html: '<iframe width="100%" height="100%" src="https://app.waiteraid.com/reservation/?app_type=bokabord&hash=f6dbbb53f2cbbafdf35e3b82115d411a&gaci=" allowfullscreen></iframe>' }}
            style={{ marginTop: 20, marginBottom: 20 }}

        />
    );
}

Advertisement

Answer

I can’t believe myself, instead of sending in a tag to WebView, I should have only given it the link to the website.

<WebView style={styles.webView} source={{ uri: URL }} />
3 People found this is helpful
Advertisement