docs(react-native): updated screenshots (#1020)

packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/01-video-calling.mdx

@@ -712,15 +712,18 @@ const styles = StyleSheet.create({
   // highlight-start
   customCallControlsContainer: {
     position: 'absolute',
-    bottom: 20,
+    bottom: 40,
     paddingVertical: 10,
     width: '80%',
     marginHorizontal: 20,
     flexDirection: 'row',
     alignSelf: 'center',
     justifyContent: 'space-around',
-    backgroundColor: 'pink',
+    backgroundColor: 'orange',
     borderRadius: 10,
+    borderColor: 'black',
+    borderWidth: 5,
+    zIndex: 5,
   },
   // highlight-end
 });
@@ -754,10 +757,17 @@ const CustomTopView = () => {
   const dominantSpeaker = useDominantSpeaker();
   return (
     <View style={styles.customCallTopViewContainer}>
-      <Text ellipsizeMode="tail" numberOfLines={1}>
-        Video Call between {participants.map(p => p.name).join(', ')} humans
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={1}
+        style={styles.customCallTopViewText}>
+        Video Call between {participants.map(p => p.name).join(', ')}
       </Text>
-      <Text>Dominant Speaker: {dominantSpeaker?.name}</Text>
+      {dominantSpeaker?.name && (
+        <Text style={styles.customCallTopViewText}>
+          Dominant Speaker: {dominantSpeaker?.name}
+        </Text>
+      )}
     </View>
   );
 };
@@ -784,11 +794,14 @@ const styles = StyleSheet.create({
   // highlight-start
   customCallTopViewContainer: {
     width: '100%',
-    height: 100,
-    backgroundColor: 'lightblue',
+    height: 50,
+    backgroundColor: 'black',
     justifyContent: 'center',
     alignItems: 'center',
   },
+  customCallTopViewText: {
+    color: 'white',
+  },
   // highlight-end
 });
 
@@ -822,7 +835,7 @@ export default function App() {
       },
       toggleAudioPublishingButton: {
         container: {
-          backgroundColor: 'yellow',
+          backgroundColor: 'green',
         },
       },
     }),

packages/react-native-sdk/docusaurus/docs/reactnative/02-tutorials/03-livestream.mdx

@@ -3,6 +3,9 @@ title: Livestream Tutorial
 description: How to build a livestream experience using Stream's React Native Video SDK
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 import { TokenSnippet } from '../../../shared/_tokenSnippet.jsx';
 
 In this tutorial, we'll quickly build a low-latency in-app livestreaming experience.
@@ -19,35 +22,40 @@ We'll cover the following topics:
 
 Let's get started, if you have any questions or feedback be sure to let us know via the feedback button.
 
-### Step 1 - Setup a new React Native app
+## Step 1 - Setup a new React Native app
 
 Create a new React Native app using the official template,
 
 ```bash title=Terminal
-npx react-native@latest init LiveStreamExample
-cd LiveStreamExample
+npx react-native@latest init VideoCallExample
+cd VideoCallExample
 ```
 
-### Step 2 - Install the SDK and declare permissions
+## Step 2 - Install the SDK and declare permissions
 
-To install the Stream Video React Native SDK, run the following command in your terminal of choice:
+In order to install the Stream Video React Native SDK, run the following command in your terminal of choice:
 
 ```bash title=Terminal
-yarn add @stream-io/video-react-native-sdk
+yarn add @stream-io/video-react-native-sdk @stream-io/react-native-webrtc
 ```
 
 The SDK requires installing some peer dependencies. You can run the following command to install them:
 
 ```bash title=Terminal
-yarn add @stream-io/react-native-webrtc react-native-device-info \
-    react-native-incall-manager react-native-svg \
-    @react-native-community/netinfo @notifee/react-native
+yarn add [email protected]
+yarn add [email protected]
+yarn add react-native-svg
+yarn add @react-native-community/[email protected]
+yarn add @notifee/[email protected]
+
+# Install pods for iOS
 npx pod-install
 ```
 
 #### Add Stream Video SDK's setup method
 
-##### Android
+<Tabs groupId="device-os">
+<TabItem value="android" label="Android" default>
 
 Add the following in your `MainApplication.java` file:
 
@@ -69,9 +77,8 @@ public class MainApplication extends Application implements ReactApplication {
 }
 ```
 
-<!-- vale on -->
-
-##### iOS
+</TabItem>
+<TabItem value="ios" label="iOS">
 
 Add the following in your `AppDelegate.m` or `AppDelegate.mm` file:
 
@@ -90,31 +97,37 @@ Add the following in your `AppDelegate.m` or `AppDelegate.mm` file:
 }
 ```
 
-#### Declare permissions
-
-##### iOS
+</TabItem>
+</Tabs>
 
-Add the following keys and values to `Info.plist` file:
-
-- `Privacy - Camera Usage Description` - "`LiveStreamExample` requires camera access to capture and transmit video"
-- `Privacy - Microphone Usage Description` - "`LiveStreamExample` requires microphone access to capture and transmit audio"
+#### Declare permissions
 
-##### Android
+<Tabs groupId="device-os">
+<TabItem value="android" label="Android" default>
 
-In `AndroidManifest.xml` add the following permissions before the `<application>` section.
+In `AndroidManifest.xml` add the following permissions before the `application` section.
 
 ```xml
-<uses-feature android:name="android.hardware.camera" />
-<uses-feature android:name="android.hardware.camera.autofocus" />
-<uses-feature android:name="android.hardware.audio.output" />
-<uses-feature android:name="android.hardware.microphone" />
-
-<uses-permission android:name="android.permission.CAMERA" />
-<uses-permission android:name="android.permission.RECORD_AUDIO" />
-<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
-<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
-<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
-<uses-permission android:name="android.permission.INTERNET" />
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  // highlight-start
+  <uses-feature android:name="android.hardware.camera" />
+  <uses-feature android:name="android.hardware.camera.autofocus" />
+  <uses-feature android:name="android.hardware.audio.output" />
+  <uses-feature android:name="android.hardware.microphone" />
+
+  <uses-permission android:name="android.permission.CAMERA" />
+  <uses-permission android:name="android.permission.RECORD_AUDIO" />
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+  <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
+  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
+  // highlight-end
+  <uses-permission android:name="android.permission.INTERNET" />
+  ...
+  <application
+    ...
+  />
+  </application>
+</manifest>
 ```
 
 If you plan to also support Bluetooth devices then also add the following.
@@ -125,18 +138,49 @@ If you plan to also support Bluetooth devices then also add the following.
 <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
 ```
 
+</TabItem>
+<TabItem value="ios" label="iOS">
+
+Add the following keys and values to `Info.plist` file, under `dict` tag.
+
+```plist title="Info.plist"
+<plist version="1.0">
+<dict>
+  ...
+  <key>CFBundleName</key>
+  <string>$(PRODUCT_NAME)</string>
+  // highlight-start
+  <key>NSCameraUsageDescription</key>
+  <string>$(PRODUCT_NAME) would like to use your camera</string>
+  <key>NSMicrophoneUsageDescription</key>
+  <string>$(PRODUCT_NAME) would like to use your microphone</string>
+  // highlight-end
+  ...
+</dict>
+</plist>
+
+```
+
+</TabItem>
+</Tabs>
+
 :::note
-For simplicity, in this tutorial, we do not cover about managing native runtime permissions. Before starting the next step, ensure that camera and microphone permissions are given for this app by granting them in the native settings app. We have discussed a detailed solution to manage native runtime permissions in the [Manage Native Permissions](../../core/native-permissions) guide.
+For simplicity, in this tutorial, we do not cover about managing native runtime permissions. Before starting the next step, ensure that microphone permissions are given for this app by granting them in the native settings app. We have discussed a detailed solution to manage native runtime permissions in the [Manage Native Permissions](../../core/native-permissions) guide.
 :::
 
 #### Android Specific installation
 
 In `android/app/build.gradle` add the following inside the `android` section:
 
 ```java
-compileOptions {
-	sourceCompatibility JavaVersion.VERSION_1_8
-	targetCompatibility JavaVersion.VERSION_11
+android {
+  ...
+  // highlight-start
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_11
+  }
+  // highlight-end
 }
 ```
 
@@ -146,6 +190,22 @@ In `android/gradle.properties` add the following:
 android.enableDexingArtifactTransform.desugaring=false
 ```
 
+#### Run the app
+
+To ensure the best possible experience, we highly recommend running the app on a physical device.
+This is due to the limitations in audio and video device support on emulators.
+You can refer to the React Native documentation for guidance on [running the app on a physical device](https://reactnative.dev/docs/running-on-device).
+
+However, if you still prefer to use an emulator, execute the following command:
+
+```bash
+# run iOS app
+yarn ios
+
+# run Android app
+yarn android
+```
+
 ### Step 3 - Broadcast a livestream from your device
 
 The following code shows how to publish from your device's camera.