Update example app

example/App.tsx

@@ -1,17 +1,17 @@
+import { FishjamContextProvider } from '@fishjam-dev/react-native-client';
 import React from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Toast from 'react-native-toast-message';
 
 import AppNavigator from './navigators/AppNavigator';
-import AppProvider from './providers/AppProvider';
 
 function App(): React.JSX.Element {
   return (
     <>
       <GestureHandlerRootView>
-        <AppProvider>
+        <FishjamContextProvider>
           <AppNavigator />
-        </AppProvider>
+        </FishjamContextProvider>
       </GestureHandlerRootView>
       <Toast />
     </>

example/README.md

@@ -1,17 +1,47 @@
 # React native fishjam example
 
-## Usage
+## Running the Example app
 
-### To run app please follow those steps:
+1. Clone the repository:
 
-Move to package directory `cd ..`. <br>
-Run `yarn clean` from package directory. <br>
-Run `yarn installAll` from package directory.<br>
-Move to example directory `cd example`.<br>
-Run in one terminal window `yarn start` to start metro.<br>
-Run in other terminal window `yarn ios` or `yarn android` to run app on selected platform.<br>
+```
+git clone https://github.com/fishjam-dev/react-native-client-sdk.git
+cd react-native-client-sdk
+```
+
+2. Install node_modules in project root directory:
+
+```cmd
+yarn
+```
+
+3. Install node_modules in `example/` directory:
+
+```cmd
+cd example && yarn
+```
+
+4. Start Metro bundler in `example/` directory
+
+```cmd
+yarn start
+```
+
+5. Run in other terminal window command below to run app on selected platform.
+
+```cmd
+yarn ios
+```
+
+or
+
+```cmd
+yarn android
+```
 
 ## Testing
 
-For testing checkout [Readme](webdriverio-test/readme.md) in `webdriverio-test` directory. <br>
-**Note:** If you add crucial files that should affect output of android .apk file make sure to add that file to github actions files: [cache action](../.github/actions/cache_apk_file/action.yml) and [restore action](../.github/actions/restore_apk_file/action.yml).
+> [!NOTE]  
+> If you add crucial files that should affect output of android .apk file make sure to add that file to github actions files: [cache action](../.github/actions/cache_apk_file/action.yml) and [restore action](../.github/actions/restore_apk_file/action.yml).
+
+For testing checkout [README](webdriverio-test/readme.md) in `webdriverio-test` directory.

example/components/SoundOutputDevicesSection.tsx

@@ -2,6 +2,7 @@ import { MaterialCommunityIcons } from '@expo/vector-icons';
 import {
   AudioOutputDevice,
   AudioOutputDeviceType,
+  useAudioSettings,
 } from '@fishjam-dev/react-native-client';
 import React from 'react';
 import {
@@ -12,14 +13,13 @@ import {
   View,
 } from 'react-native';
 
-import { useFishjamExampleContext } from '../contexts/FishjamExampleContext';
 import { soundOutputDevicesLabels } from '../types/ComponentLabels';
 import { TextColors } from '../utils/Colors';
 
 const { TITLE_TEXT, OUTPUT_DEVICE_BUTTON } = soundOutputDevicesLabels;
 
 export const SoundOutputDevicesSection = () => {
-  const { audioSettings } = useFishjamExampleContext();
+  const audioSettings = useAudioSettings();
 
   return (
     <View style={styles.wrapper}>

example/hooks/useJoinRoom.ts

@@ -0,0 +1,56 @@
+import {
+  useCamera,
+  useFishjamClient,
+  useMicrophone,
+  VideoQuality,
+} from '@fishjam-dev/react-native-client';
+import { useCallback } from 'react';
+import { Platform } from 'react-native';
+
+interface Props {
+  isCameraAvailable: boolean;
+  isMicrophoneAvailable: boolean;
+}
+
+export function useJoinRoom({
+  isCameraAvailable,
+  isMicrophoneAvailable,
+}: Props) {
+  const { join } = useFishjamClient();
+  const { startCamera, getCaptureDevices } = useCamera();
+  const { startMicrophone } = useMicrophone();
+
+  const joinRoom = useCallback(async () => {
+    await startCamera({
+      simulcastConfig: {
+        enabled: true,
+        activeEncodings:
+          Platform.OS === 'android' ? ['l', 'm', 'h'] : ['l', 'h'],
+      },
+      quality: VideoQuality.HD_169,
+      maxBandwidth: { l: 150, m: 500, h: 1500 },
+      videoTrackMetadata: { active: isCameraAvailable, type: 'camera' },
+      captureDeviceId: await getCaptureDevices().then(
+        (devices) => devices.find((device) => device.isFrontFacing)?.id,
+      ),
+      cameraEnabled: isCameraAvailable,
+    });
+
+    await join({
+      name: 'RN mobile',
+    });
+
+    await startMicrophone({
+      audioTrackMetadata: { active: isMicrophoneAvailable, type: 'audio' },
+      microphoneEnabled: isMicrophoneAvailable,
+    });
+  }, [
+    isCameraAvailable,
+    isMicrophoneAvailable,
+    join,
+    startCamera,
+    startMicrophone,
+  ]);
+
+  return { joinRoom };
+}

example/hooks/usePermissionCheck.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { Platform, PermissionsAndroid, Permission } from 'react-native';
+import { Platform, PermissionsAndroid } from 'react-native';
 
 export function usePermissionCheck() {
   useEffect(() => {
@@ -9,9 +9,9 @@ export function usePermissionCheck() {
       }
       try {
         await PermissionsAndroid.requestMultiple([
-          PermissionsAndroid.PERMISSIONS.CAMERA as Permission,
-          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO as Permission,
-          PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS as Permission,
+          PermissionsAndroid.PERMISSIONS.CAMERA,
+          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+          PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
         ]);
       } catch (err) {
         console.warn(err);

example/hooks/usePreventBackButton.ts

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+import { BackHandler } from 'react-native';
+
+export const usePreventBackButton = () =>
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => true,
+    );
+    return () => backHandler.remove();
+  }, []);