React Native SDK

npm install @dial/react-native
# or
yarn add @dial/react-native
 
# iOS specific
cd ios && pod install

import { DialClient } from '@dial/react-native';
 
const dial = new DialClient({
  apiKey: process.env.DIAL_API_KEY,
  walletAddress: '0x...'
});

const call = await dial.calls.start({
  to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
  type: 'video',
  displayName: 'Alice.eth'
});

import { useDialCall, useDialMessages } from '@dial/react-native';
 
function CallScreen() {
  const { call, answer, decline, end } = useDialCall();
  
  if (!call) return null;
  
  return (
    <View>
      <Text>Incoming call from {call.from}</Text>
      <Button title="Answer" onPress={answer} />
      <Button title="Decline" onPress={decline} />
    </View>
  );
}

import { DialNotifications } from '@dial/react-native';
 
// Setup push notifications
await DialNotifications.requestPermissions();
await DialNotifications.register();
 
// Handle incoming call notifications
DialNotifications.onIncomingCall((call) => {
  // Show call UI
});

import { DialCallKit } from '@dial/react-native';
 
// Automatic CallKit integration
// Calls will appear in native iOS call UI
await DialCallKit.enable({
  appName: 'MyApp',
  ringtoneSound: 'ringtone.mp3'
});

import React, { useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { 
  DialProvider, 
  useDial, 
  useDialCall 
} from '@dial/react-native';
 
function App() {
  return (
    <DialProvider apiKey={process.env.DIAL_API_KEY}>
      <MainScreen />
    </DialProvider>
  );
}
 
function MainScreen() {
  const { dial, isConnected } = useDial();
  const { call, answer, decline, end } = useDialCall();
  
  const makeCall = async () => {
    await dial.calls.start({
      to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
      type: 'video'
    });
  };
  
  if (call) {
    return (
      <View>
        <Text>
          {call.status === 'ringing' 
            ? `Incoming call from ${call.from}`
            : 'In call'
          }
        </Text>
        
        {call.status === 'ringing' ? (
          <>
            <Button title="Answer" onPress={answer} />
            <Button title="Decline" onPress={decline} />
          </>
        ) : (
          <Button title="End Call" onPress={end} />
        )}
      </View>
    );
  }
  
  return (
    <View>
      <Button 
        title="Make Call" 
        onPress={makeCall}
        disabled={!isConnected}
      />
    </View>
  );
}

<key>NSCameraUsageDescription</key>
<string>We need camera access for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need microphone access for calls</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need photo library access to share images</string>

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

import { WebView } from 'react-native-webview';
 
function DialWebView() {
  return (
    <WebView 
      source={{ uri: 'https://dial.wtf/embed/call' }}
      mediaPlaybackRequiresUserAction={false}
      allowsInlineMediaPlayback={true}
    />
  );
}