React Native Guide

1
// App.tsx
2
import React, { useState } from 'react';
3
import { View, Text, TextInput, Pressable } from 'react-native';
4
import {
5
  createJambonzClient,
6
  JambonzClient,
7
  ClientState,
8
} from '@jambonz/client-sdk-react-native';
9
10
function App() {
11
  const [client, setClient] = useState<JambonzClient | null>(null);
12
  const [state, setState] = useState<ClientState>(ClientState.Disconnected);
13
14
  const connect = async () => {
15
    const c = createJambonzClient({
16
      server: 'wss://sbc.example.com:8443',
17
      username: 'your-username',
18
      password: 'your-password',
19
    });
20
21
    c.on('stateChanged', (s) => setState(s));
22
    c.on('error', (err) => console.log('Error:', err.message));
23
24
    await c.connect();
25
    setClient(c);
26
  };
27
28
  return (
29
    <View style={{ padding: 40 }}>
30
      <Text>Status: {state}</Text>
31
      <Pressable onPress={connect}>
32
        <Text>Connect</Text>
33
      </Pressable>
34
    </View>
35
  );
36
}
37
38
export default App;

1
const [call, setCall] = useState(null);
2
const [callState, setCallState] = useState(null);
3
4
const makeCall = (target: string) => {
5
  if (!client) return;
6
7
  const newCall = client.call(target);
8
  newCall.on('stateChanged', (s) => setCallState(s));
9
  newCall.on('ended', () => {
10
    setCall(null);
11
    setCallState(null);
12
  });
13
  newCall.on('failed', () => {
14
    setCall(null);
15
    setCallState(null);
16
  });
17
18
  setCall(newCall);
19
};
20
21
// In your JSX:
22
<Pressable onPress={() => makeCall('+15551234567')}>
23
  <Text>Call</Text>
24
</Pressable>
25
<Pressable onPress={() => call?.hangup()}>
26
  <Text>Hang Up</Text>
27
</Pressable>

1
import { Alert } from 'react-native';
2
3
// After creating the client:
4
c.on('incoming', (incomingCall) => {
5
  Alert.alert(
6
    'Incoming Call',
7
    `From: ${incomingCall.remoteIdentity}`,
8
    [
9
      {
10
        text: 'Decline',
11
        style: 'destructive',
12
        onPress: () => incomingCall.hangup(),
13
      },
14
      {
15
        text: 'Answer',
16
        onPress: () => {
17
          incomingCall.answer();
18
          setCall(incomingCall);
19
          // Bind call events...
20
        },
21
      },
22
    ],
23
  );
24
});

1
const [isMuted, setIsMuted] = useState(false);
2
const [isHeld, setIsHeld] = useState(false);
3
4
// Bind events on the call:
5
newCall.on('mute', (muted) => setIsMuted(muted));
6
newCall.on('hold', (held) => setIsHeld(held));
7
8
// In your JSX:
9
<Pressable onPress={() => call?.toggleMute()}>
10
  <Text>{isMuted ? 'Unmute' : 'Mute'}</Text>
11
</Pressable>
12
<Pressable onPress={() => isHeld ? call?.unhold() : call?.hold()}>
13
  <Text>{isHeld ? 'Resume' : 'Hold'}</Text>
14
</Pressable>

1
// Call another registered user
2
client.callUser('alice');
3
4
// Take a call from a queue
5
client.callQueue('support');
6
7
// Join a conference room
8
client.callConference('standup-meeting');
9
10
// Call a jambonz application
11
client.callApplication('your-app-sid');

1
import { useJambonzClient, useCall } from '@jambonz/client-sdk-react-native';
2
3
function Phone() {
4
  const client = useJambonzClient({
5
    server: 'wss://sbc.example.com:8443',
6
    username: 'your-username',
7
    password: 'your-password',
8
  });
9
10
  const call = useCall(client.client);
11
12
  return (
13
    <View>
14
      <Text>Status: {client.state}</Text>
15
16
      {!client.isRegistered && (
17
        <Pressable onPress={client.connect}>
18
          <Text>Connect</Text>
19
        </Pressable>
20
      )}
21
22
      {client.isRegistered && !call.isActive && (
23
        <Pressable onPress={() => call.makeCall('+15551234567')}>
24
          <Text>Call</Text>
25
        </Pressable>
26
      )}
27
28
      {call.isActive && (
29
        <>
30
          <Text>Call: {call.state}</Text>
31
          <Pressable onPress={call.toggleMute}>
32
            <Text>{call.isMuted ? 'Unmute' : 'Mute'}</Text>
33
          </Pressable>
34
          <Pressable onPress={call.hangup}>
35
            <Text>Hang Up</Text>
36
          </Pressable>
37
        </>
38
      )}
39
    </View>
40
  );
41
}