Using Hooks to Track Call State in React and React Native

- product:video - language:react - language:javascript # Using Hooks to Track Call State in React and React Native This article follows either from [Getting Started with Video API in React](../getting-started-video-api-react/index.mdx) or [Getting Started with Video API in React Native](../getting-started-video-api-react-native/index.mdx). Those articles will help you set up a basic hello world application in your platform of choice, so if you havent got a project setup already, you should start there. Your video call will need a UI, and it is important that the UI reflect the state of the call. For example, youd only want to show the Unmute button if the microphone is currently muted. Similarly, youd want the list of members to change as people come and go. The RoomSession object allows you to subscribe to events. For example, RoomSession.on(memberList.updated, callback) would keep you informed of the comings and goings of members. The

); } jsx title=App.js import { useCallback, useState } from react; import { Video } from @signalwire-community/react-native; import { useMembers, useStatus, useLayouts } from @signalwire-community/react; import { SafeAreaView, View, Button, Text, ScrollView } from react-native; export default function DemoVideo() { const [roomSession, setRoomSession] = useState(null); const { members } = useMembers(roomSession); const onRoomReady = useCallback((rs) => setRoomSession(rs), []); return ( ); } Each member in members has information about the members current state and methods to change them. For example, member.remove() would, if you have the required permissions, remove the user from the conference. Now lets consider the following piece of code: jsx Members:

{members.map((member) => (
• {member.name} {member.talking && 🗣} {[audio, video, speaker].map((io) => ( {member[io].muted ? Unmute : Mute } {io} ))} Remove
))}

jsx Members:; { members.map((member) => ( {member.name} {member.talking && 🗣} {[audio, video, speaker].map((io) => ( ))} )); }

There are a few things to note: 1. The 🗣 emoji, conditioned on the member.talking property, only renders when that member is talking. 2. Similarly, {member[io].muted ? Unmute : Mute} will automatically update to reflect current state of the member. 3. member.audio, member.video, and member.speaker all provide identical interfaces to control the inputs and outputs to the stream. For example, member.audio.muted tells you if that member has their audio turned off. member.audio.mute() / member.audio.unmute() will turn the microphone on and off. And a simple helper method member.audio.toggle() will toggle between the states. ### Providing Controls for the Current Member Unless you were a moderator, you wouldnt need access to controls for other members, but you would still need to control your own stream. For that purpose, useMembers gives you another property: self, which always references the current user within the members array. We could use it like so: jsx const { self } = useMembers(roomSession); return ( <> {/* ... */} {[audio, video, speaker].map((io) => ( {self?.[io].muted ? Unmute : Mute } {io} ))} Leave );

jsx const { self } = useMembers(roomSession); return ( <> {/* ... */} {[audio, video, speaker].map((io) => ( ))} );

That was straightforward. The symbol self is just a reference to the current member within the room, so you use it like any other member. But notice the small addition: self**?.**[io].toggle(). We are [optionally chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) properties to control self. That is because, before you have joined the room, there is nothing for self to point to, so it points to null. That problem was not felt for the members array because mapping an empty array is safe, but addressing nulls properties is not. Thus, in the code example above, until youve joined the room, the buttons will do nothing when clicked. For better UX, it might be better to hide or disable the buttons, to clearly indicate that those buttons are not functional yet. Which brings us to the next hook: useStatus. ### Altering UI if Room Has Been Joined or Left Using useStatus The useStatus hook simply returns an active property that is true if the room is active, and the current user is connected to it. We can use it to solve the problem like so: jsx const { self } = useMembers(roomSession); const { active } = useStatus(roomSession); return ( <> {/* ... */} {[audio, video, speaker].map((io) => ( self?.[io].toggle()} disabled={!active}> {self?.[io].muted ? Unmute : Mute } {io} ))} self?.remove()} disabled={!active}> Leave );

jsx const { self } = useMembers(roomSession); const { active } = useStatus(roomSession); return ( <> {/* ... */} {[audio, video, speaker].map((io) => ( ))} );

Here we simply applied the disabled attribute for the buttons based on !active, but feel free to make more complex UI decisions based on the useStatus hook. ### Working with layouts using useLayouts At this point, the general pattern of usage should be apparent. With the same basic idea, we can control the layout of the video call. jsx const { layouts, setLayout, currentLayout } = useLayouts(roomSession); const { active } = useStatus(roomSession); if (!active) return null; return ( { setLayout({ name: e.target.value }); }} > {layouts.map((l) => ( {l} ))} );

jsx const { layouts, setLayout, currentLayout } = useLayouts(roomSession); const { active } = useStatus(roomSession); if (!active) return null; return ( setLayout({ name: itemValue })} > {layouts.map((layout) => ( ))} ); :::note is not a basic React Native component (unlike in HTML, which is). Youll want to install the picker with something like npm i @react-native-picker/picker, and import it into your code with import {Picker} from @react-native-picker/picker. :::

In this case, layouts contains an array of the layouts allowed in the room, currentLayout always updates to the layout applied on the room, no matter who applies it, and setLayout allows you to change it. ### Enabling Screen Sharing with useScreenShare Screen Sharing is equally simple in React. jsx const { active } = useStatus(roomSession); const { toggle, active: screenShareActive } = useScreenShare(roomSession); return ( {screenShareActive ? Stop screen share : Start screen share} ); Here we are renaming the active property from useScreenShare to screenShareActive so it doesnt collide with the other active property from useStatus. Now screenShareActive is true when the user is sharing their screen.

:::info Not Available on React Native Screen Sharing on React Native, specially on Expo, tends to be quite a bit involved, requiring at least some tinkering with the native code, and will be the subject of a separate article. ::: ## Putting It All Together Once you get the hang of this pattern, it should be very easy to put it all together. The full code for this guide may be accessed at the git repo [signalwire-community/examples](https://github.com/signalwire-community/examples/tree/main/react/hooks_basic).

Be sure to check back. We plan to add a lot more functionality for React here. And since this is a community supported repo, you are always welcome to contribute with your own code examples, features or fixes. :::info This project on GitHub #### [signalwire-community/examples -> react/hooks_basic](https://github.com/signalwire-community/examples/tree/main/react/hooks_basic) ::: :::info This project on GitHub #### [signalwire-community/examples -> react_native/native_hooks_basic](https://github.com/signalwire-community/examples/tree/main/react_native/native_hooks_basic) :::