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.

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

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 }}

        />
    );
}

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 }} />

Advertisement

Answer