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