React Native Guide

Build a cross-platform mobile app with the widget using react-native-webview. This provides a unified codebase for both iOS and Android.

✓

Cross-Platform

One component for iOS and Android.

✓

Auto-Height

Can be configured to fit content (requires extra prop).

Component Code

Back to Configurator

import React from 'react';
import { WebView } from 'react-native-webview';

export function CalendarWeekWidget() {
  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        body { margin: 0; padding: 16px; }
      </style>
    </head>
    <body>
      <div class=\"tcw-embed\" data-design=\"dashboard\" data-variant=\"weekdays\"></div>
      <script src="https://thecalendarweek.com/embed.js" async></script>
    </body>
    </html>
  `;

  return (
    <WebView
      source={{ html }}
      style={{ flex: 1 }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

Dependency Required: You must install react-native-webview to use this component.