Relay SDK

Complete documentation for building Relay Apps with @dotrly/sdk.

1. Installation

Install the SDK in your Relay App project.

bash

npm install @dotrly/sdk

2. Platform & UI

Core components for handling safe areas and device capabilities.

SafeAreaProvider

Essential provider that handles notch and safe area insets. Wrap your app in this.

tsx

import { SafeAreaProvider } from '@dotrly/sdk';

export default function App() {
  return (
    <SafeAreaProvider>
      <YourApp />
    </SafeAreaProvider>
  );
}

usePlatform()

Get information about the current device environment.

tsx

import { usePlatform } from '@dotrly/sdk';

const { os, isMobile } = usePlatform();

if (isMobile) {
  // Render mobile layout
}

3. Notifications

Send system notifications and manage app badges. The SDK automatically uses your app's icon if available.

useNotifications()

tsx

import { useNotifications } from '@dotrly/sdk';

export function NotificationDemo() {
  const { 
    requestPermission, 
    sendNotification, 
    setBadge,
    permission 
  } = useNotifications();

  const handleNotify = async () => {
    // 1. Check/Request Permission
    if (permission !== 'granted') {
      await requestPermission();
    }

    // 2. Send Notification
    // Note: Automatically uses app icon from <link rel="icon">
    sendNotification('New Message', { 
      body: 'You have a new message from Relay',
      tag: 'message-1' // Prevents duplicates
    });

    // 3. Update App Badge
    await setBadge(1);
  };
}

4. Clipboard

Access the system clipboard with built-in history management.

useClipboard()

tsx

import { useClipboard } from '@dotrly/sdk';

export function ClipboardDemo() {
  const { 
    copyText, 
    readText, 
    history 
  } = useClipboard();

  const handleCopy = async () => {
    await copyText('Copied from Relay!');
  };

  const handlePaste = async () => {
    const text = await readText();
    console.log('Clipboard content:', text);
  };

  // Access history
  // history = [{ type: 'text', content: '...', timestamp: 123 }, ...]
}

5. Geolocation

Access device location and calculate distances.

useGeolocation()

tsx

import { useGeolocation } from '@dotrly/sdk';

export function LocationDemo() {
  const { 
    latitude, 
    longitude, 
    loading,
    error,
    getLocation 
  } = useGeolocation();

  useEffect(() => {
    getLocation();
  }, []);

  if (loading) return <div>Locating...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      Position: {latitude}, {longitude}
    </div>
  );
}