diff --git a/guide/react-native/reconnect.mdx b/guide/react-native/reconnect.mdx new file mode 100644 index 0000000..ea557e3 --- /dev/null +++ b/guide/react-native/reconnect.mdx @@ -0,0 +1,36 @@ +--- +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. + +### Example code that logs the current status to the console: + +```ts +import { useEffect, useRef } from "react"; +import { + ReconnectionStatus, + useReconnection, +} from "@fishjam-cloud/react-native-client"; + +function Component() { + const prevStatus = useRef("idle"); + const { reconnectionStatus } = useReconnection(); + + useEffect(() => { + if (prevStatus.current == reconnectionStatus) return; + prevStatus.current = reconnectionStatus; + if (reconnectionStatus == "error") { + console.log("Failed to reconnect"); + } else if (reconnectionStatus == "reconnecting") { + console.log("Connection is broken, reconnecting..."); + } else { + console.log("Connected succesfully"); + } + }, [reconnectionStatus]); + + return ; +} +```