@integraciones_doc24/meeting-react-native

React Native library for meeting with Doc24 professionals on Android and iOS

Installation

npm i @integraciones_doc24/meeting-react-native

Then, follow the installation intructions of the opentok-react-native library, skipping the installation of the opentok-react-native npm module.

Usage

This library exposes a component Doc24MeetingCall and a hook useDoc24NativeMeeting

useDoc24NativeMeeting takes one parameter of type BaseDoc24MeetingProps and returns an object of type MeetingStatus

  type BaseDoc24MeetingProps = {
    // The vcToken you should have gotten through the sdk
    vcToken: string;
    // The url of the public api of doc24
    serverUrl: string;

    // Callbacks
    onEndCall?: () => void;
    onAnsweredCall?: (parameters: TokBoxParameters) => void;
    onHoldCall?: () => void;
    onResumeCall?: (parameters: TokBoxParameters) => void;
    onError?: (error: unknown) => void;
  }

  type MeetingStatus =
    | {type: 'ended'}
    | {type: 'canceled'}
    | {type: 'waiting'}
    | {type: 'onHold'}
    | {type: 'error'}
    | {
        type: 'active';
        helpers: MeetingHelpers;
        session: OTSession;
        parameters?: TokBoxParameters
      };

  type MeetingHelpers = {
    endCall: () => Promise<void>;
  }

When the professional answers the call, useDoc24NativeMeeting returns an object with the property type === 'active' and two other properties. One of those properties, session, should be passed as props to Doc24MeetingCall. The other one, helpers has one method that can be used to end the call.

Example

export const CallComponent = (props: CallComponentProps) => {
  const status = useDoc24NativeMeeting({
     serverUrl: "https://tapiaws.doc24.com.ar/ws",
     vcToken: props.vcToken,
     onEndCall: () => {
       // Go to post-call page
       props.onEndCall()
     },
   });
 
   if (status.type === "waiting")
     return <Text>Waiting for the professional to answer the call</Text>;
 
   if (status.type === "onHold")
     return <Text>The professional has put you on hold</Text>;

  if (status.type === "canceled")
    return <Text>The professional canceled your meeting</Text>;
 
   if (status.type === "ended" || status.type === 'error') return null;
 
 
   const buttons = (
     <View
       style={{
         width: '100%',
         height: '100%',
         padding: 16,
         justifyContent: 'flex-end',
       }}>
       <View style={{width: '100%', height: 50, justifyContent: 'space-around'}}>
         <Button
          title="End call"
          onPress={() => status.helpers.endCall()}
        />
       </View>
     </View>
   );
 
   return (
     <Doc24MeetingCall
       session={status.session}
       overlay={buttons}
     />
   );
 };

Doc24MeetingCall props

    // The session, you should get this from `useDoc24NativeMeeting`
    session: OTSession
    
    // A component that takes the full space of the component on top of it, usefull for showing buttons or information
    overlay: JSX.Element;
    // Component to show while loading
    loading?: JSX.Element
    // Which camera to use
    cameraPosition?: 'front' | 'back';
    // Disable publishers mic
    disableMic?: boolean;
    // Disable publishers camera
    disableCamera?: boolean;
    // Stylize the publisher (patient) video component. It will clear default style, so you'll need to set zIndex, position, etc. 
    publisherStyle?: StyleProp<ViewStyle>;
     // Stylize the subscriber (doctor) video component. It will clear default style, so you'll need to set zIndex, position, etc. 
    subscriberStyle?: StyleProp<ViewStyle>;