diff --git a/examples/video-player/App.tsx b/examples/video-player/App.tsx
index 4787ae1f..70036ec5 100644
--- a/examples/video-player/App.tsx
+++ b/examples/video-player/App.tsx
@@ -1,12 +1,40 @@
-import { StyleSheet, View } from 'react-native';
-import FishjamPlayer from './components/FishjamPlayer';
-
-const roomName = 'test';
+import { StyleSheet, TextInput, View, Button } from 'react-native';
+import FishjamPlayerViewer from './components/FishjamPlayerViewer';
+import FishjamPlayerStreamer from './components/FishjamPlayerStreamer';
+import { useState } from 'react';
 
 const App = () => {
+  const [roomName, setRoomName] = useState('test-room');
+  const [selection, setSelection] = useState<'streamer' | 'viewer' | 'none'>(
+    'none',
+  );
+
   return (
-    <View style={styles.videoContainer}>
-      <FishjamPlayer roomName={roomName} />
+    <View style={styles.container}>
+      {selection === 'none' && (
+        <>
+          <TextInput
+            style={styles.textInput}
+            placeholder="Room Name"
+            value={roomName}
+            onChangeText={setRoomName}
+          />
+          <Button title="Stream" onPress={() => setSelection('streamer')} />
+          <Button title="View stream" onPress={() => setSelection('viewer')} />
+        </>
+      )}
+      {selection === 'streamer' && (
+        <>
+          <FishjamPlayerStreamer roomName={roomName} />
+          <Button title="Back" onPress={() => setSelection('none')} />
+        </>
+      )}
+      {selection === 'viewer' && (
+        <>
+          <FishjamPlayerViewer roomName={roomName} />
+          <Button title="Back" onPress={() => setSelection('none')} />
+        </>
+      )}
     </View>
   );
 };
@@ -14,9 +42,22 @@ const App = () => {
 export default App;
 
 const styles = StyleSheet.create({
-  videoContainer: {
+  container: {
     flex: 1,
-    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: 'black',
+  },
+  textInput: {
+    width: '100%',
+    height: 40,
+    borderWidth: 1,
+    borderColor: 'gray',
+    borderRadius: 8,
+    padding: 8,
+    color: 'white',
     backgroundColor: 'black',
+    marginBottom: 16,
   },
 });
diff --git a/examples/video-player/app.json b/examples/video-player/app.json
index 82a79856..86fb7c62 100644
--- a/examples/video-player/app.json
+++ b/examples/video-player/app.json
@@ -14,7 +14,15 @@
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "io.fishjam.example.videoplayer",
-      "requireFullScreen": true
+      "requireFullScreen": true,
+      "infoPlist": {
+        "NSAppTransportSecurity": {
+          "NSAllowsArbitraryLoads": true
+        },
+        "NSCameraUsageDescription": "We need to access your camera for video calls.",
+        "NSMicrophoneUsageDescription": "We need to access your microphone so you can talk during calls."
+      },
+      "appleTeamId": "J5FM626PE2"
     },
     "android": {
       "adaptiveIcon": {
@@ -22,7 +30,11 @@
         "backgroundColor": "#ffffff"
       },
       "edgeToEdgeEnabled": true,
-      "package": "io.fishjam.example.videoplayer"
+      "package": "io.fishjam.example.videoplayer",
+      "permissions": [
+        "android.permission.CAMERA",
+        "android.permission.RECORD_AUDIO"
+      ]
     },
     "web": {
       "favicon": "./assets/favicon.png"
diff --git a/examples/video-player/components/FishjamPlayer.tsx b/examples/video-player/components/FishjamPlayer.tsx
deleted file mode 100644
index 9936d02b..00000000
--- a/examples/video-player/components/FishjamPlayer.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-import {
-  LivestreamViewer,
-  useLivestreamViewer,
-} from '@fishjam-cloud/react-native-client/livestream';
-import { useSandbox } from '@fishjam-cloud/react-native-client';
-import { useDeviceOrientation } from '../hooks/useDeviceOrientation';
-import { setStatusBarHidden } from 'expo-status-bar';
-import { setVisibilityAsync } from 'expo-navigation-bar';
-
-interface FishjamPlayerProps {
-  roomName: string;
-  pictureInPicture?: boolean;
-}
-
-const PIP_SIZE = {
-  width: 1920,
-  height: 1080,
-};
-
-const FishjamPlayer = ({
-  roomName,
-  pictureInPicture = true,
-}: FishjamPlayerProps) => {
-  const { isLandscape } = useDeviceOrientation();
-  const styles = useMemo(() => createStyles(isLandscape), [isLandscape]);
-  const { getSandboxViewerToken } = useSandbox({
-    fishjamId: process.env.EXPO_PUBLIC_FISHJAM_ID,
-  });
-
-  const { connect, disconnect, whepClientRef } = useLivestreamViewer();
-
-  const handleConnect = useCallback(async () => {
-    try {
-      const token = await getSandboxViewerToken(roomName);
-      await connect({ token });
-    } catch (err) {
-      console.error(err);
-    }
-  }, [connect, getSandboxViewerToken, roomName]);
-
-  useEffect(() => {
-    handleConnect();
-
-    return () => {
-      disconnect();
-    };
-  }, [handleConnect, disconnect]);
-
-  useEffect(() => {
-    setStatusBarHidden(isLandscape, 'fade');
-    if (Platform.OS === 'android') {
-      setVisibilityAsync(isLandscape ? 'hidden' : 'visible');
-    }
-
-    return () => {
-      setStatusBarHidden(false, 'fade');
-      if (Platform.OS === 'android') {
-        setVisibilityAsync('visible');
-      }
-    };
-  }, [isLandscape]);
-
-  return (
-    <View style={styles.playerContentContainer}>
-      <View style={styles.playerWhepView}>
-        <LivestreamViewer
-          style={styles.playerWhepClientView}
-          pipEnabled={pictureInPicture}
-          autoStartPip={pictureInPicture}
-          autoStopPip={pictureInPicture}
-          pipSize={PIP_SIZE}
-          ref={whepClientRef}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default FishjamPlayer;
-
-const createStyles = (isLandscape: boolean) =>
-  StyleSheet.create({
-    playerWhepClientView: {
-      flex: 1,
-    },
-    playerContentContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    playerWhepView: {
-      width: '100%',
-      height: isLandscape ? '100%' : undefined,
-      aspectRatio: isLandscape ? undefined : 16 / 9,
-      backgroundColor: 'black',
-    },
-    playerLoader: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-  });
diff --git a/examples/video-player/components/FishjamPlayerStreamer.tsx b/examples/video-player/components/FishjamPlayerStreamer.tsx
new file mode 100644
index 00000000..87f08afa
--- /dev/null
+++ b/examples/video-player/components/FishjamPlayerStreamer.tsx
@@ -0,0 +1,62 @@
+import React, { useCallback, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  LivestreamStreamer,
+  useLivestreamStreamer,
+  cameras,
+  VideoParameters,
+} from '@fishjam-cloud/react-native-client/livestream';
+import { useSandbox } from '@fishjam-cloud/react-native-client';
+
+interface FishjamPlayerStreamerProps {
+  roomName: string;
+}
+
+const FishjamPlayerStreamer = ({ roomName }: FishjamPlayerStreamerProps) => {
+  const { getSandboxLivestream } = useSandbox({
+    fishjamId: process.env.EXPO_PUBLIC_FISHJAM_ID,
+  });
+
+  const { connect, disconnect, whipClientRef } = useLivestreamStreamer({
+    videoEnabled: true,
+    audioEnabled: true,
+    camera: cameras[0],
+    videoParameters: VideoParameters.presetHD169,
+  });
+
+  const handleConnect = useCallback(async () => {
+    try {
+      const { streamerToken } = await getSandboxLivestream(roomName, false);
+      await connect(streamerToken);
+    } catch (err) {
+      console.error(err);
+    }
+  }, [connect, getSandboxLivestream, roomName]);
+
+  useEffect(() => {
+    handleConnect();
+
+    return () => {
+      disconnect();
+    };
+  }, [handleConnect, disconnect]);
+
+  return (
+    <View style={styles.playerContentContainer}>
+      <LivestreamStreamer
+        style={{ height: '90%', aspectRatio: 16 / 9 }}
+        ref={whipClientRef}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  playerContentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default FishjamPlayerStreamer;
diff --git a/examples/video-player/components/FishjamPlayerViewer.tsx b/examples/video-player/components/FishjamPlayerViewer.tsx
new file mode 100644
index 00000000..d61be8f3
--- /dev/null
+++ b/examples/video-player/components/FishjamPlayerViewer.tsx
@@ -0,0 +1,63 @@
+import React, { useCallback, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  LivestreamViewer,
+  useLivestreamViewer,
+} from '@fishjam-cloud/react-native-client/livestream';
+import { useSandbox } from '@fishjam-cloud/react-native-client';
+
+interface FishjamPlayerViewerProps {
+  roomName: string;
+  pictureInPicture?: boolean;
+}
+
+const FishjamPlayerViewer = ({
+  roomName,
+  pictureInPicture = true,
+}: FishjamPlayerViewerProps) => {
+  const { getSandboxViewerToken } = useSandbox({
+    fishjamId: process.env.EXPO_PUBLIC_FISHJAM_ID,
+  });
+
+  const { connect, disconnect, whepClientRef } = useLivestreamViewer();
+
+  const handleConnect = useCallback(async () => {
+    try {
+      const token = await getSandboxViewerToken(roomName);
+      await connect({ token });
+    } catch (err) {
+      console.error(err);
+    }
+  }, [connect, getSandboxViewerToken, roomName]);
+
+  useEffect(() => {
+    handleConnect();
+
+    return () => {
+      disconnect();
+    };
+  }, [handleConnect, disconnect]);
+
+  return (
+    <View style={styles.playerContentContainer}>
+      <LivestreamViewer
+        style={{ height: '90%', aspectRatio: 16 / 9 }}
+        pipEnabled={pictureInPicture}
+        autoStartPip={pictureInPicture}
+        autoStopPip={pictureInPicture}
+        pipSize={{ width: 1920, height: 1080 }}
+        ref={whepClientRef}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  playerContentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default FishjamPlayerViewer;