Custom Component with a Webview displaying a red dot?

Get Help
1

Hey guys,

I’m creating a component with a Webview:

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

<View style={styles.wrapper}>
        <WebView
          source={{ uri: "https://reactnative.dev/" }}
          style={{
            color,
            flex: 1,
          }}
        />
      </View>

But it doesn’t work… It displays a small red dot. What does this mean? I have no errors in console.

2

Hi!

What platform are you testing react-native-webview on? My guess is that you’re testing inside the editor, which means that you’re on web. As far as I know, react-native-webview is only iOS and Android compatible.

Instead, on web you can use React code, and then have a separate version for mobile. Alternatively, this library implements react-native-webview for web. If you use that library, just don’t do the aliasing that they suggest in the readme.

You can find more information on cross-platform compatibility here: Cross-Platform Compatibility | Adalo

Best,
Scott Massey
Software Engineer @Adalo