diff --git a/docs/react-native/connecting.mdx b/docs/react-native/connecting.mdx index 56395e2..4fb1106 100644 --- a/docs/react-native/connecting.mdx +++ b/docs/react-native/connecting.mdx @@ -46,7 +46,9 @@ follow our [server setup instructions](/production/server). In order to connect, you just need to call `joinRoom` method with data from previous step: ```ts -import { joinRoom } from "@fishjam-cloud/react-native-client"; +import { useConnection } from "@fishjam-cloud/react-native-client"; + +const { joinRoom } = useConnection(); await joinRoom(fishjamUrl, peerToken); ``` @@ -56,7 +58,9 @@ await joinRoom(fishjamUrl, peerToken); In order to close connection, you have to call `leaveRoom` method. ```ts -import { leaveRoom } from "@fishjam-cloud/react-native-client"; +import { useConnection } from "@fishjam-cloud/react-native-client"; + +const { leaveRoom } = useConnection(); await leaveRoom(); ``` diff --git a/docs/react-native/quick-setup.mdx b/docs/react-native/quick-setup.mdx index 325911d..fee1cf6 100644 --- a/docs/react-native/quick-setup.mdx +++ b/docs/react-native/quick-setup.mdx @@ -71,6 +71,7 @@ function StartStreamingButton({ userName: string; }) { const { prepareCamera } = useCamera(); + const { joinRoom } = useConnection(); const startStreaming = async () => { const response = await fetch( @@ -89,10 +90,10 @@ function StartStreamingButton({ ### 3. Check if you are connected -Once you are connected, you can check connection status with `usePeerStatus` hook +Once you are connected, you can check connection status with `useConnection` hook ```ts -const { peerStatus } = usePeerStatus(); +const { connectionStatus } = useConnection(); ``` ### 4. Show other peers @@ -161,7 +162,7 @@ npx expo install expo-camera && npx expo prebuild import { useCallback, useEffect } from "react"; import { Button, StyleSheet, View } from "react-native"; import { - joinRoom, + useConnection, useCamera, usePeers, VideoRendererView, @@ -171,7 +172,7 @@ import { useCameraPermissions } from "expo-camera"; function TracksView() { const { peers } = usePeers(); - const { peerStatus } = usePeerStatus(); + const { connectionStatus } = useConnection(); const videoTracks = peers.flatMap((peer) => peer.tracks.filter((track) => track.type === "Video" && track.isActive), @@ -199,6 +200,7 @@ function StartStreamingButton({ userName: string; }) { const { prepareCamera } = useCamera(); + const { joinRoom } = useConnection(); const startStreaming = async () => { const response = await fetch( @@ -216,7 +218,7 @@ function StartStreamingButton({ export default function HomeScreen() { const [permission, requestPermission] = useCameraPermissions(); - const { peerStatus } = usePeerStatus(); + const { connectionStatus } = useConnection(); useEffect(() => { requestPermission(); @@ -228,7 +230,7 @@ export default function HomeScreen() { return ( - {peerStatus !== "connected" && ( + {connectionStatus !== "connected" && ( )} diff --git a/docs/react-native/reconnect.mdx b/docs/react-native/reconnect.mdx index 6ad4809..5a43a12 100644 --- a/docs/react-native/reconnect.mdx +++ b/docs/react-native/reconnect.mdx @@ -4,26 +4,26 @@ sidebar_position: 7 # Reconnect -If your connection is lost while you are connected to a room, the app will automatically handle the reconnection process. You can monitor these events by utilizing the `useReconnection` hook. +If your connection is lost while you are connected to a room, the app will automatically handle the reconnection process. You can monitor these events by utilizing the `useConnection` hook. ### Example hook that logs the current status to the console: ```ts import { useEffect, useRef } from "react"; import { - ReconnectionStatus, - useReconnection, + ConnectionStatus, + useConnection, } from "@fishjam-cloud/react-native-client"; -function useLogReconnectionStatus() { - const prevStatus = useRef("idle"); - const { reconnectionStatus } = useReconnection(); +function useLogConnectionStatus() { + const prevStatus = useRef("idle"); + const { connectionStatus } = useConnection(); useEffect(() => { - if (prevStatus.current === reconnectionStatus) return; - prevStatus.current = reconnectionStatus; + if (prevStatus.current === connectionStatus) return; + prevStatus.current = connectionStatus; - switch (reconnectionStatus) { + switch (connectionStatus) { case "error": return console.log("Failed to reconnect"); case "reconnecting": @@ -31,6 +31,6 @@ function useLogReconnectionStatus() { default: return console.log("Connected succesfully"); } - }, [reconnectionStatus]); + }, [connectionStatus]); } ```