Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webViewRender results in a blank screen #206

Open
dogankablan opened this issue Jan 22, 2025 · 0 comments
Open

webViewRender results in a blank screen #206

dogankablan opened this issue Jan 22, 2025 · 0 comments

Comments

@dogankablan
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant