Skip to content

webViewRender results in a blank screen #206

Open
@dogankablan

Description

@dogankablan

Describe the bug
I'm using the react-native-react-bridge package to render a React component inside a WebView using the webViewRender function. However, when I run the app, the WebView displays a completely blank (white) screen. No errors are logged, and the expected styled content does not appear.

I suspect the issue might be related to how the webViewRender function generates the HTML or how the WebView is rendering it in React Native.

Platform:

  • Version of [react-native]: [0.74.3]
  • Version of this package: [0.12.3]
  • OS: [iOS, Android]
  • Running on: [Device, Simulator]
  • JavaScript engine: [Hermes]

Additional context

HomeScreen.tsx

import React from 'react';
import WebView from 'react-native-webview';
import AppLayout from '~containers/AppLayout/AppLayout';
import Chart from '../../components/chart/Chart';
import styles from './HomeScreen.style';

const HomeScreen = () => {
return (

<WebView source={{ html: Chart }} scrollEnabled={false} />

);
};

export default HomeScreen;

Chart.tsx

import React from 'react';
import { webViewRender } from 'react-native-react-bridge/lib/web';

const Chart = () => {
return (
<div
style={{
backgroundColor: '#f5f5f5',
borderRadius: '8px',
padding: '20px', //
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
textAlign: 'center',
fontFamily: 'Arial, sans-serif',
fontSize: '18px',
color: '#333',
}}>
Hello World!

);
};

export default webViewRender();

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions