Update React Native code formatting (#61)

## Description

Various RN documentation tweaks:
- fix formatting configuration
- hide components from menu
- refactor all examples to be 'copy - ready'

This is how updated example will look like:

<img width="728" alt="Screenshot 2024-11-28 at 10 53 48"
src="https://github.com/user-attachments/assets/f0821b74-bcfc-4055-a78f-a3ab7e272bbd">

.prettierignore

@@ -1,2 +1,3 @@
 build/*
-node_modules/*
+node_modules/*
+.yarn/*

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "tabWidth": 2
+}

.spelling

@@ -62,3 +62,4 @@ se
 InstallPackage
 ConfigurePermissions
 mdx
+_components

docs/introduction.mdx

@@ -32,7 +32,7 @@ We provide the infrastructure, media server and client SDKs so you can focus on
 We are maintaining a simple video conferencing app called [Videoroom](https://room.fishjam.io/).
 It is a publicly accessible app where you can see Fishjam in action.
 
-You can access it at [room.fishjam.io](https://room.fishjam.io/) - just pick a room name and username and you can start a video call between any two devices.
+You can access it at [room.fishjam.io](https://room.fishjam.io/) - just pick a room name and peer name and you can start a video call between any two devices.
 
 ## Any examples I can run locally?
 

docs/react-native/components/install-package.mdx → docs/react-native/_components/install-package.mdx

@@ -11,11 +11,17 @@ npm install @fishjam-cloud/react-native-client
   </TabItem>
 
   <TabItem value="rn" label="Bare workflow">
-  1. [Install](https://docs.expo.dev/bare/installing-expo-modules/) Expo dependencies
-  2. Install Fishjam
+
+#### Install Expo dependencies
+
+Follow instructions form official [Expo documentation](https://docs.expo.dev/bare/installing-expo-modules/).
+
+#### Install Fishjam
+
     ```sh
     npx expo install @fishjam-cloud/react-native-client
     ```
+
   </TabItem>
 
 </Tabs>

docs/react-native/connecting.mdx

@@ -45,22 +45,56 @@ follow our [server setup instructions](/production/server).
 
 In order to connect, you just need to call `joinRoom` method with data from previous step:
 
-```ts
+```tsx
+import { useCallback } from "react";
+import { Button } from "react-native";
 import { useConnection } from "@fishjam-cloud/react-native-client";
 
-const { joinRoom } = useConnection();
+// check https://cloud.fishjam.work/app/ for your app ID
+const YOUR_APP_ID = "...";
+
+export function JoinRoomButton() {
+  // highlight-next-line
+  const { joinRoom } = useConnection();
+
+  const onPressJoin = useCallback(async () => {
+    const { fishjamUrl, peerToken } = await getRoomDetails("Room", "User");
+
+    // highlight-next-line
+    await joinRoom(fishjamUrl, peerToken);
+  }, [joinRoom]);
 
-await joinRoom(fishjamUrl, peerToken);
+  return <Button onPress={onPressJoin} title="Join Room" />;
+}
+
+async function getRoomDetails(roomName: string, peerName: string) {
+  // this will work ONLY for sandbox app
+  const response = await fetch(
+    `https://fishjam.io/api/v1/connect/${YOUR_APP_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}`,
+  );
+  const { fishjamUrl, peerToken } = await response.json();
+  return { fishjamUrl, peerToken };
+}
 ```
 
 ## Disconnecting
 
 In order to close connection, you have to call `leaveRoom` method.
 
-```ts
+```tsx
+import { useCallback } from "react";
+import { Button } from "react-native";
 import { useConnection } from "@fishjam-cloud/react-native-client";
 
-const { leaveRoom } = useConnection();
+export function LeaveRoomButton() {
+  // highlight-next-line
+  const { leaveRoom } = useConnection();
+
+  const onPressLeave = useCallback(async () => {
+    // highlight-next-line
+    await leaveRoom();
+  }, [leaveRoom]);
 
-await leaveRoom();
+  return <Button onPress={onPressLeave} title="Leave Room" />;
+}
 ```

docs/react-native/installation.mdx

@@ -4,8 +4,8 @@ sidebar_position: 1
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-import InstallPackage from "./components/install-package.mdx";
-import ConfigurePermissions from "./components/configure-permissions.mdx";
+import InstallPackage from "./_components/install-package.mdx";
+import ConfigurePermissions from "./_components/configure-permissions.mdx";
 
 # Installation
 

docs/react-native/list-other.mdx

@@ -9,21 +9,39 @@ other peers, together with the tracks that they are streaming.
 
 ### Example code that show all videos
 
-```ts
-import { usePeers, VideoRendererView } from '@fishjam-cloud/react-native-client';
+```tsx
+import { View } from "react-native";
+import {
+  usePeers,
+  VideoRendererView,
+} from "@fishjam-cloud/react-native-client";
 
-function Component() {
-  const { peers } = usePeers();
-  const videoTracks = peers.flatMap((peer) =>
-    peer.tracks.filter(
-      (track) => track.type === 'Video' && track.isActive,
-    ),
+export function ShowAllPeers() {
+  // highlight-next-line
+  const { remotePeers, localPeer } = usePeers();
+
+  const videoTracks = remotePeers.flatMap((peer) =>
+    // highlight-next-line
+    peer.tracks.filter((track) => track.type === "Video" && track.isActive),
   );
+  // highlight-next-line
+  const localTrack = localPeer?.tracks.find((t) => t.type === "Video");
 
   return (
     <View>
+      {localTrack && (
+        <VideoRendererView
+          key={localTrack.id}
+          trackId={localTrack.id}
+          videoLayout="FIT"
+        />
+      )}
       {videoTracks.map((track) => (
-        <VideoRendererView key={track.id} trackId={track.id} videoLayout="FIT" />
+        <VideoRendererView
+          key={track.id}
+          trackId={track.id}
+          videoLayout="FIT"
+        />
       ))}
     </View>
   );

docs/react-native/quick-setup.mdx

@@ -2,8 +2,8 @@
 sidebar_position: 0
 ---
 
-import InstallPackage from "./components/install-package.mdx";
-import ConfigurePermissions from "./components/configure-permissions.mdx";
+import InstallPackage from "./_components/install-package.mdx";
+import ConfigurePermissions from "./_components/configure-permissions.mdx";
 
 # Quick Setup
 
@@ -63,26 +63,34 @@ Keep in mind that this won't work on iOS Simulator, as Simulator can't access th
 To start streaming, you have to prepare your camera and join the room:
 
 ```tsx
-function StartStreamingButton({
+import { useCallback } from "react";
+import { Button } from "react-native";
+import { useCamera, useConnection } from "@fishjam-cloud/react-native-client";
+
+export function StartStreamingButton({
   roomName,
-  userName,
+  peerName,
 }: {
   roomName: string;
-  userName: string;
+  peerName: string;
 }) {
+  // highlight-next-line
   const { prepareCamera } = useCamera();
+  // highlight-next-line
   const { joinRoom } = useConnection();
 
-  const startStreaming = async () => {
+  const startStreaming = useCallback(async () => {
     const response = await fetch(
       `https://fishjam.io/api/v1/connect/${YOUR_ID}/room-manager/?roomName=${roomName}&peerName=${peerName}`,
     );
     const { url, peerToken } = await response.json();
 
+    // highlight-next-line
     await prepareCamera({ cameraEnabled: true });
 
+    // highlight-next-line
     await joinRoom(url, peerToken);
-  };
+  }, [joinRoom, prepareCamera, roomName, peerName]);
 
   return <Button title="Start Streaming" onPress={startStreaming} />;
 }
@@ -108,18 +116,23 @@ Fetching other peers in your room can be done with the `usePeers` hook. To displ
 `VideoRendererView` component. Example code could look like this:
 
 ```tsx
-function TracksView() {
-  const { peers } = usePeers();
+import {
+  usePeers,
+  VideoRendererView,
+} from "@fishjam-cloud/react-native-client";
+import { View } from "react-native";
+
+export function TracksView() {
+  const { remotePeers } = usePeers();
 
-  const videoTracks = peers.flatMap((peer) =>
+  const videoTracks = remotePeers.flatMap((peer) =>
     peer.tracks.filter((track) => track.type === "Video" && track.isActive),
   );
 
   return (
-    <View style={styles.tracksContainer}>
+    <View>
       {videoTracks.map((track) => (
         <VideoRendererView
-          style={styles.videoElement}
           key={track.id}
           trackId={track.id}
           videoLayout="FIT"
@@ -128,19 +141,6 @@ function TracksView() {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  tracksContainer: {
-    flex: 1,
-    alignItems: "center",
-  },
-  videoElement: {
-    width: "85%",
-    aspectRatio: 1,
-    backgroundColor: "gray",
-    marginVertical: 16,
-  },
-});
 ```
 
 ## Full example
@@ -159,22 +159,21 @@ npx expo install expo-camera && npx expo prebuild
 :::
 
 ```tsx
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import { Button, StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useCameraPermissions } from "expo-camera";
 import {
   useConnection,
   useCamera,
   usePeers,
   VideoRendererView,
 } from "@fishjam-cloud/react-native-client";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { useCameraPermissions } from "expo-camera";
 
 function TracksView() {
-  const { peers } = usePeers();
-  const { connectionStatus } = useConnection();
+  const { remotePeers } = usePeers();
 
-  const videoTracks = peers.flatMap((peer) =>
+  const videoTracks = remotePeers.flatMap((peer) =>
     peer.tracks.filter((track) => track.type === "Video" && track.isActive),
   );
 
@@ -194,17 +193,17 @@ function TracksView() {
 
 function StartStreamingButton({
   roomName,
-  userName,
+  peerName,
 }: {
   roomName: string;
-  userName: string;
+  peerName: string;
 }) {
   const { prepareCamera } = useCamera();
   const { joinRoom } = useConnection();
 
   const startStreaming = async () => {
     const response = await fetch(
-      `https://fishjam.io/api/v1/connect/*YOUR_ID*/room-manager?roomName=${roomName}&peerName=${userName}`,
+      `https://fishjam.io/api/v1/connect/*YOUR_ID*/room-manager?roomName=${roomName}&peerName=${peerName}`,
     );
     const { url, peerToken } = await response.json();
 
@@ -222,7 +221,7 @@ export default function HomeScreen() {
 
   useEffect(() => {
     requestPermission();
-  }, []);
+  }, [requestPermission]);
 
   if (!permission) {
     return <View />;
@@ -231,7 +230,7 @@ export default function HomeScreen() {
   return (
     <SafeAreaView style={styles.container}>
       {connectionStatus !== "connected" && (
-        <StartStreamingButton roomName="*roomName*" userName="*username*" />
+        <StartStreamingButton roomName="Room Name" peerName="Peer Name" />
       )}
       <TracksView />
     </SafeAreaView>

docs/react-native/reconnect.mdx

@@ -15,8 +15,10 @@ import {
   useConnection,
 } from "@fishjam-cloud/react-native-client";
 
-function useLogConnectionStatus() {
+export function useLogConnectionStatus() {
   const prevStatus = useRef<ConnectionStatus>("idle");
+
+  // highlight-next-line
   const { connectionStatus } = useConnection();
 
   useEffect(() => {
@@ -29,7 +31,7 @@ function useLogConnectionStatus() {
       case "reconnecting":
         return console.log("Connection is broken, reconnecting...");
       default:
-        return console.log("Connected succesfully");
+        return console.log("Connected successfully");
     }
   }, [connectionStatus]);
 }

docs/react-native/screensharing.mdx

@@ -168,15 +168,25 @@ On Android API level >= 24, you must use a foreground service when screen sharin
 You can enable/disable screen sharing with `toggleScreenShare` method. And check current state with `isScreenShareOn` property.
 
 ```tsx
+import { useCallback } from "react";
+import { Button } from "react-native";
 import { useScreenShare } from "@fishjam-cloud/react-native-client";
 
-function ScreenShareButton() {
+export function ScreenShareButton() {
+  // highlight-next-line
   const { toggleScreenShare, isScreenShareOn } = useScreenShare();
 
+  const onPressToggle = useCallback(
+    // highlight-next-line
+    () => toggleScreenShare(),
+    [toggleScreenShare],
+  );
+
   return (
-    <Button onPress={toggleScreenShare}>
-      {isScreenShareOn ? "Disable" : "Enable"} screen share
-    </Button>
+    <Button
+      onPress={onPressToggle}
+      title={`${isScreenShareOn ? "Disable" : "Enable"} screen share`}
+    />
   );
 }
 ```