From 2139772f951c684409a685935ca415a2d1f1a8a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Justyna=20Gr=C4=99da?=
 <83274413+gredajustyna@users.noreply.github.com>
Date: Tue, 1 Oct 2024 14:23:37 +0200
Subject: [PATCH] [MOB-65] Add small fixes to the documentation and code (#35)

- Removed string interpolation from iOS example
- Added info about installing `expo-modules`
---
 .../WhipWhepDemo/ContentView.swift            |  4 +-
 packages/react-native-client/README.md        | 48 +++++++++++++++++--
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/examples/ios/WhipWhepDemo/WhipWhepDemo/ContentView.swift b/examples/ios/WhipWhepDemo/WhipWhepDemo/ContentView.swift
index d1748d5..500cc99 100644
--- a/examples/ios/WhipWhepDemo/WhipWhepDemo/ContentView.swift
+++ b/examples/ios/WhipWhepDemo/WhipWhepDemo/ContentView.swift
@@ -16,8 +16,8 @@ struct ContentView: View {
             }
         }
     @State var whepBroadcaster = WhepClient(serverUrl: URL(string: "https://broadcaster.elixir-webrtc.org/api/whep")!, configurationOptions: ConfigurationOptions(authToken: "example"))
-    @State var whepPlayer = WhepClient(serverUrl: URL(string: "\(Bundle.main.infoDictionary?["WhepServerUrl"] as? String ?? "")")!, configurationOptions: ConfigurationOptions(authToken: "example"))
-    @State var whipPlayer = WhipClient(serverUrl: URL(string: "\(Bundle.main.infoDictionary?["WhipServerUrl"] as? String ?? "")")!, configurationOptions: ConfigurationOptions(authToken: "example"), videoDevice: WhipClient.getCaptureDevices().first)
+    @State var whepPlayer = WhepClient(serverUrl: URL(string: Bundle.main.infoDictionary?["WhepServerUrl"] as? String ?? "")!, configurationOptions: ConfigurationOptions(authToken: "example"))
+    @State var whipPlayer = WhipClient(serverUrl: URL(string: Bundle.main.infoDictionary?["WhipServerUrl"] as? String ?? "")!, configurationOptions: ConfigurationOptions(authToken: "example"), videoDevice: WhipClient.getCaptureDevices().first)
     
     var body: some View {
         VStack {
diff --git a/packages/react-native-client/README.md b/packages/react-native-client/README.md
index 949ccd6..17f97de 100644
--- a/packages/react-native-client/README.md
+++ b/packages/react-native-client/README.md
@@ -6,15 +6,19 @@ This repository is an expo module that makes use of native Android and iOS packa
 
 ## Setup
 
+Install the package using `npm` or `yarn`:
+
 ```
 $ npm install --save react-native-whip-whep
 # --- or ---
 $ yarn add react-native-whip-whep
 ```
 
+### With Expo
+
 It is necessary to configure app permissions in order to stream a preview from the camera or sound:
 
-### Android
+#### Android
 
 Modify `app.json` file to request necessary permissions:
 
@@ -24,16 +28,16 @@ Modify `app.json` file to request necessary permissions:
     ...
     "android": {
       ...
-      "permissions": {
+      "permissions": [
         "android.permission.CAMERA",
         "android.permission.RECORD_AUDIO"
-      }
+      ]
     }
   }
 }
 ```
 
-### iOS
+#### iOS
 
 Add the following lines to `app.json`:
 
@@ -52,6 +56,42 @@ Add the following lines to `app.json`:
 }
 ```
 
+### Without Expo
+
+If the project is a bare React Native project, it is required to install `expo-modules`:
+
+```
+$ npx install-expo-modules
+```
+
+For more information and troubleshooting, visit [expo-modules documentation](https://docs.expo.dev/bare/installing-expo-modules/).
+
+It is necessary to configure app permissions in order to stream a preview from the camera or sound:
+
+#### Android
+
+Modify `AndroidManifest.xml` file to request necessary permissions:
+
+```xml
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  ...
+  <uses-permission android:name="android.permission.CAMERA"/>
+  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+  ...
+</manifest>
+```
+
+#### iOS
+
+Add the following lines to `info.plist`:
+
+```plist
+<key>NSCameraUsageDescription</key>
+<string>This application requires camera access to gather information about available video devices.</string>
+<key>NSMicrophoneUsageDescription</key>
+<string>This application requires microphone access to gather information about available audio devices.</string>
+```
+
 ## Usage
 
 In order to use the package functionalities and run the example app, a WHIP/WHEP server is necessary. It is recommended to use the [WHIP/WHEP server](https://github.com/elixir-webrtc/ex_webrtc/tree/9e1888185211c8da7128db7309584af8e863fafa/examples/whip_whep) provided by `elixir-webrtc`, as it was utilized during the development.