WebView Alternative for React Native Web Expo

Question

I want to display an external website within my app. Exactly as WebView for Android/iOS.

Expo's React Native WebView does not support the web platform. https://docs.expo.io/versions/latest/sdk/webview/

Is there an Expo-friendly alternative for displaying an external website from a url in the web platform?

Answer 1

This question needs more details but,

You can platform check and on Platform.OS === 'web' use a styled iframe to show external website.

Update:

You still didn't say what are you rendering in webview. So I'm just giving you the basic code. You need to do styling for presentation.

Component:

//native-webview.tsx
import React, { CSSProperties } from 'react';
import { Platform } from 'react-native';
import { WebView } from 'react-native-webview';

interface NativeWebViewProps {
    target: string;
}

export const NativeWebView = (props: NativeWebViewProps): JSX.Element => {
    if (Platform.OS === 'web') {
        return <iframe src={props.target} style={styles} />;
    }
    return <WebView source={{ uri: props.target }} />;
};

const styles: CSSProperties = {
    height: 600,
    width: 800
};

Usage in App.tsx:

// App.tsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NativeWebView } from './src/components/native-webview';

export default function App() {
    return (
        <View style={styles.container}>
            <NativeWebView target="https://en.m.wikipedia.org" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

EDIT: Fixed wrong import.