Description
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();