Update example app

README.md

@@ -378,27 +378,28 @@ Then to start the foreground service:
 import notifee, { AndroidImportance } from '@notifee/react-native';
 
 const startForegroundService = async () => {
-  if (Platform.OS === 'android') return;
-  const channelId = await notifee.createChannel({
-    id: 'video_call',
-    name: 'Video call',
-    lights: false,
-    vibration: false,
-    importance: AndroidImportance.DEFAULT,
-  });
-
-  await notifee.displayNotification({
-    title: 'Your video call is ongoing',
-    body: 'Tap to return to the call.',
-    android: {
-      channelId,
-      asForegroundService: true,
-      ongoing: true,
-      pressAction: {
-        id: 'default',
+  if (Platform.OS === 'android') {
+    const channelId = await notifee.createChannel({
+      id: 'video_call',
+      name: 'Video call',
+      lights: false,
+      vibration: false,
+      importance: AndroidImportance.DEFAULT,
+    });
+
+    await notifee.displayNotification({
+      title: 'Your video call is ongoing',
+      body: 'Tap to return to the call.',
+      android: {
+        channelId,
+        asForegroundService: true,
+        ongoing: true,
+        pressAction: {
+          id: 'default',
+        },
       },
-    },
-  });
+    });
+  }
 };
 ```
 

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}>