// App.jsx
function App() {
   return (
       <CallProvider>
          <AppContent />
       </CallProvider>
   );
}

// CallProvider.jsx
export const CallProvider = ({children}) => {
 const [view, setView] = useState(PREJOIN); // pre-join | in-call
 const [callFrame, setCallFrame] = useState(null);
 const [participants, setParticipants] = useState([]);
 const [room, setRoom] = useState(null);
 const [error, setError] = useState(null);
 const [roomExp, setRoomExp] = useState(null);
 const [activeSpeakerId, setActiveSpeakerId] = useState(null);
 const [updateParticipants, setUpdateParticipants] = useState(null);
 …
return (
   <CallContext.Provider
     value={{
       getAccountType,
       changeAccountType,
       handleMute,
       handleUnmute,
       displayName,
       joinRoom,
       leaveCall,
       endCall,
       removeFromCall,
       raiseHand,
       lowerHand,
       activeSpeakerId,
       error,
       participants,
       room,
       roomExp,
       view,
     }}>
     {children}
   </CallContext.Provider>
 );
};

// CallProvider.jsx
 const handleAppMessage = async (evt) => {
     console.log('[APP MESSAGE]', evt);
     try {
       switch (evt.data.msg) {
         case MSG_MAKE_MODERATOR:
           console.log('[LEAVING]');
           await callFrame.leave();
           console.log('[REJOINING AS MOD]');

           let userName = evt?.data?.userName;
           // Remove the raised hand emoji
           if (userName?.includes('✋')) {
             const split = userName.split('✋ ');
             userName = split.length === 2 ? split[1] : split[0];
           }
           joinRoom({
             moderator: true,
             userName,
             name: room?.name,
           });
           break;
         case MSG_MAKE_SPEAKER:
           updateUsername(SPEAKER);
           break;
         case MSG_MAKE_LISTENER:
           updateUsername(LISTENER);
           break;
         case FORCE_EJECT:
           //seeya
           leaveCall();
           break;
       }
     } catch (e) {
       console.error(e);
     }
   };

// PreJoinRoom.jsx
const PreJoinRoom = ({handleLinkPress}) => {
 const {joinRoom, error} = useCallState();
 const [firstName, setFirstName] = useState('');
 const [lastName, setLastName] = useState('');
 const [roomName, setRoomName] = useState('');
 const [submitting, setSubmitting] = useState(false);
 const [required, setRequired] = useState(false);

 const submitForm = useCallback(
   (e) => {
     e.preventDefault();
     if (!firstName?.trim()) {
       setRequired(true);
       return;
     }
     if (submitting) return;
     setSubmitting(true);
     setRequired(false);

     let userName =
       firstName?.trim() + (lastName?.trim() || '');

     let name = '';
     if (roomName?.trim()?.length) {
       name = roomName;
       /**
        * We track the account type by appending it to the username.
        * This is a quick solution for a demo; not a production-worthy solution!
        */
       userName = `${userName}_${LISTENER}`;
     } else {
       userName = `${userName}_${MOD}`;
     }
     joinRoom({userName, name});
   },
   [firstName, lastName, roomName, joinRoom],
 );

let userName = firstName?.trim() + (lastName?.trim() ?  ${lastName?.trim()} : '');

if (roomName?.trim()?.length) {
    name = roomName;

    userName = `${userName}_${LISTENER}`;
} else {
    userName = `${userName}_${MOD}`;
}

const joinRoom = async ({userName, name, moderator}) => {
   if (callFrame) {
     callFrame.leave();
   }

   let roomInfo = {name};
   /**
    * The first person to join will need to create the room first
    */
   if (!name && !moderator) {
     roomInfo = await createRoom();
   }
   setRoom(roomInfo);

   /**
    * When a moderator makes someone else a moderator,
    * they first leave and then rejoin with a token.
    * In that case, we create a token for the new mod here.
    */
   let newToken;
   if (moderator) {
     // create a token for new moderators
     newToken = await createToken(room?.name);
   }
   const call = Daily.createCallObject({videoSource: false});

   const options = {
     // This can be changed to your Daily domain
     url: `https://devrel.daily.co/${roomInfo?.name}`,
     userName,
   };
   if (roomInfo?.token) {
     options.token = roomInfo?.token;
   }
   if (newToken?.token) {
     options.token = newToken.token;
   }

   await call
     .join(options)
     .then(() => {
       setError(false);
       setCallFrame(call);
       call.setLocalAudio(false); 
       setView(INCALL);
     })
     .catch((err) => {
       if (err) {
         setError(err);
       }
     });
 };

const options = {
  url: `https://devrel.daily.co/${roomInfo?.name}`,
  userName,
};

await call
    .join(options)
    .then(() => {
       setError(false);
       setCallFrame(call);
       /**
        * Now mute, so everyone joining is muted by default.
        */
       call.setLocalAudio(false);
       setView(INCALL);
    })

// InCall.jsx
 const mods = useMemo(() => participants?.filter((p) => p?.owner), [
   participants,
   getAccountType,
 ]);

 const speakers = useMemo(
   (p) =>
     participants?.filter((p) => {
        return getAccountType(p?.user_name) === SPEAKER;
   }),
   [participants, getAccountType],
 );

// Participant.jsx
import {DailyMediaView} from '@daily-co/react-native-daily-js';

const Participant = ({participant, local, modCount, zIndex}) => {
...

{audioTrack && (
    <DailyMediaView
        id={`audio-${participant.user_id}`}
        videoTrack={null}
        audioTrack={audioTrack}
    />
)}
...

// Participant.jsx
const audioTrack = useMemo(
   () =>
     participant?.tracks?.audio?.state === 'playable'
       ? participant?.tracks?.audio?.track
       : null,
   [participant?.tracks?.audio?.state],
 );

CallProvider.jsx
const handleMute = useCallback(
   (p) => {
     if (!callFrame) return;
     console.log('[MUTING]');

     if (p?.user_id === 'local') {
       callFrame.setLocalAudio(false);
     } else {
       callFrame.updateParticipant(p?.session_id, {
         setAudio: false,
       });
     }
     setUpdateParticipants(`unmute-${p?.user_id}-${Date.now()}`);
   },
   [callFrame],
 );