diff --git a/package-lock.json b/package-lock.json
index 270119234c40..5d7be208477a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -100,7 +100,7 @@
         "react-native-url-polyfill": "2.0.0",
         "react-native-video": "6.0.0-alpha.11",
         "react-native-watch-connectivity": "1.1.0",
-        "react-native-webrtc": "124.0.4",
+        "react-native-webrtc": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#6953b21a33382478c9d56674e4d4bd35a30149f9",
         "react-native-webview": "13.8.7",
         "react-native-youtube-iframe": "2.3.0",
         "react-redux": "7.2.9",
@@ -16063,8 +16063,9 @@
     },
     "node_modules/react-native-webrtc": {
       "version": "124.0.4",
-      "resolved": "https://registry.npmjs.org/react-native-webrtc/-/react-native-webrtc-124.0.4.tgz",
-      "integrity": "sha512-ZbhSz1f+kc1v5VE0B84+v6ujIWTHa2fIuocrYzGUIFab7E5izmct7PNHb9dzzs0xhBGqh4c2rUa49jbL+P/e2w==",
+      "resolved": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#6953b21a33382478c9d56674e4d4bd35a30149f9",
+      "integrity": "sha512-JMunPsk83dw+Vn1YaK8VuzBkJtE6WznjdIn4tj84DWqzj0h8L+JGBaYTR6QRQArNvL9Dh+0dwadmXPjuh3DtUw==",
+      "license": "MIT",
       "dependencies": {
         "base64-js": "1.5.1",
         "debug": "4.3.4",
@@ -30642,9 +30643,9 @@
       }
     },
     "react-native-webrtc": {
-      "version": "124.0.4",
-      "resolved": "https://registry.npmjs.org/react-native-webrtc/-/react-native-webrtc-124.0.4.tgz",
-      "integrity": "sha512-ZbhSz1f+kc1v5VE0B84+v6ujIWTHa2fIuocrYzGUIFab7E5izmct7PNHb9dzzs0xhBGqh4c2rUa49jbL+P/e2w==",
+      "version": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#6953b21a33382478c9d56674e4d4bd35a30149f9",
+      "integrity": "sha512-JMunPsk83dw+Vn1YaK8VuzBkJtE6WznjdIn4tj84DWqzj0h8L+JGBaYTR6QRQArNvL9Dh+0dwadmXPjuh3DtUw==",
+      "from": "react-native-webrtc@git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#6953b21a33382478c9d56674e4d4bd35a30149f9",
       "requires": {
         "base64-js": "1.5.1",
         "debug": "4.3.4",
diff --git a/package.json b/package.json
index 4eb40d99a4b1..56b11448d8b3 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "react-native-url-polyfill": "2.0.0",
     "react-native-video": "6.0.0-alpha.11",
     "react-native-watch-connectivity": "1.1.0",
-    "react-native-webrtc": "124.0.4",
+    "react-native-webrtc": "git+https://git@github.com/react-native-webrtc/react-native-webrtc.git#6953b21a33382478c9d56674e4d4bd35a30149f9",
     "react-native-webview": "13.8.7",
     "react-native-youtube-iframe": "2.3.0",
     "react-redux": "7.2.9",
diff --git a/react/features/app/reducers.native.ts b/react/features/app/reducers.native.ts
index 0ffc5800b794..a0a632cc4009 100644
--- a/react/features/app/reducers.native.ts
+++ b/react/features/app/reducers.native.ts
@@ -3,6 +3,7 @@ import '../mobile/background/reducer';
 import '../mobile/call-integration/reducer';
 import '../mobile/external-api/reducer';
 import '../mobile/full-screen/reducer';
+import '../mobile/picture-in-picture/reducer';
 import '../mobile/watchos/reducer';
 import '../share-room/reducer';
 
diff --git a/react/features/app/types.ts b/react/features/app/types.ts
index 272d5bd2ca9c..898b27338f8f 100644
--- a/react/features/app/types.ts
+++ b/react/features/app/types.ts
@@ -52,6 +52,7 @@ import { IBackgroundState } from '../mobile/background/reducer';
 import { ICallIntegrationState } from '../mobile/call-integration/reducer';
 import { IMobileExternalApiState } from '../mobile/external-api/reducer';
 import { IFullScreenState } from '../mobile/full-screen/reducer';
+import { IMobilePictureInPictureState } from '../mobile/picture-in-picture/reducer';
 import { IMobileWatchOSState } from '../mobile/watchos/reducer';
 import { INoAudioSignalState } from '../no-audio-signal/reducer';
 import { INoiseDetectionState } from '../noise-detection/reducer';
@@ -142,6 +143,7 @@ export interface IReduxState {
     'features/lobby': ILobbyState;
     'features/mobile/audio-mode': IMobileAudioModeState;
     'features/mobile/external-api': IMobileExternalApiState;
+    'features/mobile/picture-in-picture': IMobilePictureInPictureState;
     'features/mobile/watchos': IMobileWatchOSState;
     'features/no-audio-signal': INoAudioSignalState;
     'features/noise-detection': INoiseDetectionState;
diff --git a/react/features/base/media/components/AbstractVideoTrack.tsx b/react/features/base/media/components/AbstractVideoTrack.tsx
index 03c405153901..9f7917c98774 100644
--- a/react/features/base/media/components/AbstractVideoTrack.tsx
+++ b/react/features/base/media/components/AbstractVideoTrack.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, ReactElement } from 'react';
 
 import { IStore } from '../../../app/types';
 import { trackVideoStarted } from '../../tracks/actions';
@@ -16,6 +16,11 @@ export interface IProps {
      */
     dispatch: IStore['dispatch'];
 
+    /**
+     * IOS component for PiP view.
+     */
+    fallbackView?: ReactElement;
+
     /**
      * Callback to invoke when the {@link Video} of {@code AbstractVideoTrack}
      * is clicked/pressed.
@@ -111,6 +116,7 @@ export default class AbstractVideoTrack<P extends IProps> extends Component<P> {
 
         return (
             <Video
+                fallbackView = { this.props.fallbackView }
                 mirror = { videoTrack?.mirror }
                 onPlaying = { this._onVideoPlaying }
 
diff --git a/react/features/base/media/components/native/Video.tsx b/react/features/base/media/components/native/Video.tsx
index e6003c9588bc..803e54b702bf 100644
--- a/react/features/base/media/components/native/Video.tsx
+++ b/react/features/base/media/components/native/Video.tsx
@@ -1,8 +1,11 @@
-import React, { Component } from 'react';
-import { GestureResponderEvent } from 'react-native';
-import { MediaStream, RTCView } from 'react-native-webrtc';
+import React, { useEffect, useRef } from 'react';
+import { GestureResponderEvent, ViewStyle } from 'react-native';
+import { MediaStream, RTCPIPView, startIOSPIP, stopIOSPIP } from 'react-native-webrtc';
+import { useSelector } from 'react-redux';
 
+import { IReduxState } from '../../../../app/types';
 import Pressable from '../../../react/components/native/Pressable';
+import logger from '../../logger';
 
 import VideoTransform from './VideoTransform';
 import styles from './styles';
@@ -11,6 +14,12 @@ import styles from './styles';
  * The type of the React {@code Component} props of {@link Video}.
  */
 interface IProps {
+
+    /**
+     * IOS component for PiP view.
+     */
+    fallbackView: React.Component;
+
     mirror: boolean;
 
     onPlaying: Function;
@@ -56,79 +65,76 @@ interface IProps {
 /**
  * The React Native {@link Component} which is similar to Web's
  * {@code HTMLVideoElement} and wraps around react-native-webrtc's
- * {@link RTCView}.
+ * {@link RTCPIPView}.
  */
-export default class Video extends Component<IProps> {
-    /**
-     * React Component method that executes once component is mounted.
-     *
-     * @inheritdoc
-     */
-    componentDidMount() {
+const Video: React.FC<IProps> = ({ fallbackView, mirror, onPlaying, onPress, stream, zoomEnabled, zOrder }: IProps) => {
+    const { enableIosPIP } = useSelector((state: IReduxState) => state['features/mobile/picture-in-picture']);
+
+    const iosPIPOptions = {
+        fallbackView,
+        preferredSize: {
+            width: 400,
+            height: 800
+        },
+        startAutomatically: true
+    };
+    const objectFit = zoomEnabled ? 'contain' : 'cover';
+    const viewRef = useRef();
+
+    const rtcView = (
+        <RTCPIPView
+            iosPIP = { iosPIPOptions }
+            mirror = { mirror }
+            objectFit = { objectFit }
+            ref = { viewRef }
+            streamURL = { stream?.toURL() }
+            style = { styles.video as ViewStyle }
+            zOrder = { zOrder } />
+    );
+
+    useEffect(() => {
         // RTCView currently does not support media events, so just fire
         // onPlaying callback when <RTCView> is rendered.
-        const { onPlaying } = this.props;
-
         onPlaying?.();
-    }
+    }, []);
 
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement|null}
-     */
-    render() {
-        const { onPress, stream, zoomEnabled } = this.props;
-
-        if (stream) {
-            // RTCView
-            const style = styles.video;
-            const objectFit
-                = zoomEnabled
-                    ? 'contain'
-                    : 'cover';
-            const rtcView
-                = (
-                    <RTCView
-                        mirror = { this.props.mirror }
-                        objectFit = { objectFit }
-                        streamURL = { stream.toURL() }
-                        style = { style }
-                        zOrder = { this.props.zOrder } />
-                );
-
-            // VideoTransform implements "pinch to zoom". As part of "pinch to
-            // zoom", it implements onPress, of course.
-            if (zoomEnabled) {
-                return (
-                    <VideoTransform
-                        enabled = { zoomEnabled }
-                        onPress = { onPress }
-                        streamId = { stream.id }
-                        style = { style }>
-                        { rtcView }
-                    </VideoTransform>
-                );
-            }
-
-            // XXX Unfortunately, VideoTransform implements a custom press
-            // detection which has been observed to be very picky about the
-            // precision of the press unlike the builtin/default/standard press
-            // detection which is forgiving to imperceptible movements while
-            // pressing. It's not acceptable to be so picky, especially when
-            // "pinch to zoom" is not enabled.
-            return (
-                <Pressable onPress = { onPress }>
-                    { rtcView }
-                </Pressable>
-            );
+    useEffect(() => {
+        if (enableIosPIP) {
+            logger.warn('Picture in picture mode on');
+            startIOSPIP(viewRef);
+        } else {
+            logger.warn('Picture in picture mode off');
+            stopIOSPIP(viewRef);
         }
+    }, [ enableIosPIP ]);
 
-        // RTCView has peculiarities which may or may not be platform specific.
-        // For example, it doesn't accept an empty streamURL. If the execution
-        // reached here, it means that we explicitly chose to not initialize an
-        // RTCView as a way of dealing with its idiosyncrasies.
-        return null;
+    // VideoTransform implements "pinch to zoom". As part of "pinch to
+    // zoom", it implements onPress, of course.
+    if (zoomEnabled) {
+        return (
+            <VideoTransform
+                enabled = { zoomEnabled }
+                onPress = { onPress }
+                streamId = { stream?.id }
+                style = { styles.video as ViewStyle }>
+                { rtcView }
+            </VideoTransform>
+        );
     }
-}
+
+    // XXX Unfortunately, VideoTransform implements a custom press
+    // detection which has been observed to be very picky about the
+    // precision of the press unlike the builtin/default/standard press
+    // detection which is forgiving to imperceptible movements while
+    // pressing. It's not acceptable to be so picky, especially when
+    // "pinch to zoom" is not enabled.
+    return (
+        <Pressable onPress = { onPress }>
+            { rtcView }
+        </Pressable>
+    );
+
+};
+
+// @ts-ignore
+export default Video;
diff --git a/react/features/base/media/components/native/VideoTrack.tsx b/react/features/base/media/components/native/VideoTrack.tsx
index 018d8efbd574..aa0032573f05 100644
--- a/react/features/base/media/components/native/VideoTrack.tsx
+++ b/react/features/base/media/components/native/VideoTrack.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import { View } from 'react-native';
 import { connect } from 'react-redux';
 
 import AbstractVideoTrack, { IProps } from '../AbstractVideoTrack';
 
-import styles from './styles';
-
 /**
  * Component that renders video element for a specified video track.
  *
  * @augments AbstractVideoTrack
  */
 class VideoTrack extends AbstractVideoTrack<IProps> {
+
     /**
      * Renders the video element for the associated video track.
      *
@@ -19,10 +17,14 @@ class VideoTrack extends AbstractVideoTrack<IProps> {
      * @returns {ReactElement}
      */
     render() {
+        const { fallbackView, videoTrack } = this.props;
+
         return (
-            <View style = { styles.video } >
-                { super.render() }
-            </View>
+            <>
+                {
+                    videoTrack?.muted ? fallbackView : super.render()
+                }
+            </>
         );
     }
 }
diff --git a/react/features/base/participants/components/ParticipantView.native.tsx b/react/features/base/participants/components/ParticipantView.native.tsx
index 390bbd5e930a..1ea6529a14bf 100644
--- a/react/features/base/participants/components/ParticipantView.native.tsx
+++ b/react/features/base/participants/components/ParticipantView.native.tsx
@@ -3,24 +3,24 @@ import { GestureResponderEvent, Text, TextStyle, View, ViewStyle } from 'react-n
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
-import {
-    isTrackStreamingStatusActive,
-    isTrackStreamingStatusInactive
-} from '../../../connection-indicator/functions';
+import { isTrackStreamingStatusInactive } from '../../../connection-indicator/functions';
 import SharedVideo from '../../../shared-video/components/native/SharedVideo';
 import { isSharedVideoEnabled } from '../../../shared-video/functions';
-import { IStateful } from '../../app/types';
 import Avatar from '../../avatar/components/Avatar';
 import { translate } from '../../i18n/functions';
 import VideoTrack from '../../media/components/native/VideoTrack';
-import { shouldRenderVideoTrack } from '../../media/functions';
 import Container from '../../react/components/native/Container';
-import { toState } from '../../redux/functions';
 import { StyleType } from '../../styles/functions.any';
 import TestHint from '../../testing/components/TestHint';
-import { getVideoTrackByParticipant } from '../../tracks/functions';
+import { getVideoTrackByParticipant } from '../../tracks/functions.native';
 import { ITrack } from '../../tracks/types';
-import { getParticipantById, getParticipantDisplayName, isSharedVideoParticipant } from '../functions';
+import {
+    getParticipantById,
+    getParticipantDisplayName,
+    isSharedVideoParticipant,
+    shouldRenderParticipantVideo
+} from '../functions';
+import { FakeParticipant } from '../types';
 
 import styles from './styles';
 
@@ -71,7 +71,7 @@ interface IProps {
     /**
      * Whether video should be disabled for his view.
      */
-    disableVideo?: boolean;
+    disableVideo?: boolean | FakeParticipant;
 
     /**
      * Callback to invoke when the {@code ParticipantView} is clicked/pressed.
@@ -162,6 +162,18 @@ class ParticipantView extends Component<IProps> {
         );
     }
 
+    _renderParticipantAvatar() {
+        const { avatarSize, participantId } = this.props;
+
+        return (
+            <View style = { styles.avatarContainer as ViewStyle }>
+                <Avatar
+                    participantId = { participantId }
+                    size = { avatarSize } />
+            </View>
+        );
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -175,14 +187,21 @@ class ParticipantView extends Component<IProps> {
             _renderVideo: renderVideo,
             _sharedVideoEnabled,
             _videoTrack: videoTrack,
+            avatarSize,
             disableVideo,
-            onPress
+            onPress,
+            participantId,
+            style,
+            testHintId: testHintIdProp,
+            useConnectivityInfoLabel,
+            zOrder,
+            zoomEnabled
         } = this.props;
 
         const testHintId
-            = this.props.testHintId
-                ? this.props.testHintId
-                : `org.jitsi.meet.Participant#${this.props.participantId}`;
+            = testHintIdProp
+                ? testHintIdProp
+                : `org.jitsi.meet.Participant#${participantId}`;
 
         const renderSharedVideo = _isSharedVideoParticipant && !disableVideo && _sharedVideoEnabled;
 
@@ -191,7 +210,7 @@ class ParticipantView extends Component<IProps> {
                 onClick = { renderVideo || renderSharedVideo ? undefined : onPress }
                 style = {{
                     ...styles.participantView,
-                    ...this.props.style
+                    ...style
                 }}
                 touchFeedback = { false }>
 
@@ -202,22 +221,17 @@ class ParticipantView extends Component<IProps> {
 
                 { renderSharedVideo && <SharedVideo /> }
 
-                { renderVideo
-                    && <VideoTrack
-                        onPress = { onPress }
-                        videoTrack = { videoTrack }
-                        waitForVideoStarted = { false }
-                        zOrder = { this.props.zOrder }
-                        zoomEnabled = { this.props.zoomEnabled } /> }
-
-                { !renderSharedVideo && !renderVideo
-                    && <View style = { styles.avatarContainer as ViewStyle }>
-                        <Avatar
-                            participantId = { this.props.participantId }
-                            size = { this.props.avatarSize } />
-                    </View> }
-
-                { _isConnectionInactive && this.props.useConnectivityInfoLabel
+                <VideoTrack
+                    avatarSize = { avatarSize }
+                    fallbackView = { this._renderParticipantAvatar() }
+                    onPress = { onPress }
+                    participantId = { participantId }
+                    videoTrack = { videoTrack }
+                    waitForVideoStarted = { false }
+                    zOrder = { zOrder }
+                    zoomEnabled = { zoomEnabled } />
+
+                { _isConnectionInactive && useConnectivityInfoLabel
                     && this._renderInactiveConnectionInfo() }
             </Container>
         );
@@ -249,52 +263,4 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
     };
 }
 
-/**
- * Returns true if the video of the participant should be rendered.
- *
- * @param {Object|Function} stateful - Object or function that can be resolved
- * to the Redux state.
- * @param {string} id - The ID of the participant.
- * @returns {boolean}
- */
-function shouldRenderParticipantVideo(stateful: IStateful, id: string) {
-    const state = toState(stateful);
-    const participant = getParticipantById(state, id);
-
-    if (!participant) {
-        return false;
-    }
-
-    /* First check if we have an unmuted video track. */
-    const videoTrack = getVideoTrackByParticipant(state, participant);
-
-    if (!videoTrack) {
-        return false;
-    }
-
-    if (!shouldRenderVideoTrack(videoTrack, /* waitForVideoStarted */ false)) {
-        return false;
-    }
-
-    /* Then check if the participant connection or track streaming status is active. */
-    if (!videoTrack.local && !isTrackStreamingStatusActive(videoTrack)) {
-        return false;
-    }
-
-    /* Then check if audio-only mode is not active. */
-    const audioOnly = state['features/base/audio-only'].enabled;
-
-    if (!audioOnly) {
-        return true;
-    }
-
-    /* Last, check if the participant is sharing their screen and they are on stage. */
-    const remoteScreenShares = state['features/video-layout'].remoteScreenShares || [];
-    const largeVideoParticipantId = state['features/large-video'].participantId;
-    const participantIsInLargeVideoWithScreen
-        = participant.id === largeVideoParticipantId && remoteScreenShares.includes(participant.id);
-
-    return participantIsInLargeVideoWithScreen;
-}
-
 export default translate(connect(_mapStateToProps)(ParticipantView));
diff --git a/react/features/base/participants/functions.ts b/react/features/base/participants/functions.ts
index ddebf4a31226..cfc3f88eb666 100644
--- a/react/features/base/participants/functions.ts
+++ b/react/features/base/participants/functions.ts
@@ -2,6 +2,7 @@
 import { getGravatarURL } from '@jitsi/js-utils/avatar';
 
 import { IReduxState, IStore } from '../../app/types';
+import { isTrackStreamingStatusActive } from '../../connection-indicator/functions';
 import { isStageFilmstripAvailable } from '../../filmstrip/functions';
 import { isAddPeopleEnabled, isDialOutEnabled } from '../../invite/functions';
 import { toggleShareDialog } from '../../share-room/actions';
@@ -13,8 +14,9 @@ import { ADD_PEOPLE_ENABLED } from '../flags/constants';
 import { getFeatureFlag } from '../flags/functions';
 import i18next from '../i18n/i18next';
 import { MEDIA_TYPE, MediaType, VIDEO_TYPE } from '../media/constants';
+import { shouldRenderVideoTrack } from '../media/functions';
 import { toState } from '../redux/functions';
-import { getScreenShareTrack, isLocalTrackMuted } from '../tracks/functions.any';
+import { getScreenShareTrack, getVideoTrackByParticipant, isLocalTrackMuted } from '../tracks/functions.any';
 import { createDeferred } from '../util/helpers';
 
 import {
@@ -807,3 +809,51 @@ export const setShareDialogVisiblity = (addPeopleFeatureEnabled: boolean, dispat
         dispatch(toggleShareDialog(true));
     }
 };
+
+/**
+ * Returns true if the video of the participant should be rendered.
+ *
+ * @param {Object|Function} stateful - Object or function that can be resolved
+ * to the Redux state.
+ * @param {string} id - The ID of the participant.
+ * @returns {boolean}
+ */
+export function shouldRenderParticipantVideo(stateful: IStateful, id: string) {
+    const state = toState(stateful);
+    const participant = getParticipantById(state, id);
+
+    if (!participant) {
+        return false;
+    }
+
+    /* First check if we have an unmuted video track. */
+    const videoTrack = getVideoTrackByParticipant(state, participant);
+
+    if (!videoTrack) {
+        return false;
+    }
+
+    if (!shouldRenderVideoTrack(videoTrack, /* waitForVideoStarted */ false)) {
+        return false;
+    }
+
+    /* Then check if the participant connection or track streaming status is active. */
+    if (!videoTrack.local && !isTrackStreamingStatusActive(videoTrack)) {
+        return false;
+    }
+
+    /* Then check if audio-only mode is not active. */
+    const audioOnly = state['features/base/audio-only'].enabled;
+
+    if (!audioOnly) {
+        return true;
+    }
+
+    /* Last, check if the participant is sharing their screen and they are on stage. */
+    const remoteScreenShares = state['features/video-layout'].remoteScreenShares || [];
+    const largeVideoParticipantId = state['features/large-video'].participantId;
+    const participantIsInLargeVideoWithScreen
+        = participant.id === largeVideoParticipantId && remoteScreenShares.includes(participant.id);
+
+    return participantIsInLargeVideoWithScreen;
+}
diff --git a/react/features/mobile/picture-in-picture/actionTypes.ts b/react/features/mobile/picture-in-picture/actionTypes.ts
index 318b31264d57..5ffa11ef4f11 100644
--- a/react/features/mobile/picture-in-picture/actionTypes.ts
+++ b/react/features/mobile/picture-in-picture/actionTypes.ts
@@ -1,3 +1,15 @@
+/**
+ * The type of redux action to enable picture-in-picture for ios.
+ *
+ * {
+ *      type: ENABLE_IOS_PIP,
+ *      enableIosPIP: boolean
+ * }
+ *
+ * @public
+ */
+export const ENABLE_IOS_PIP = 'ENABLE_IOS_PIP';
+
 /**
  * The type of redux action to enter (or rather initiate entering)
  * picture-in-picture.
diff --git a/react/features/mobile/picture-in-picture/actions.ts b/react/features/mobile/picture-in-picture/actions.ts
index 4b27aff53109..9a27bc8c6b30 100644
--- a/react/features/mobile/picture-in-picture/actions.ts
+++ b/react/features/mobile/picture-in-picture/actions.ts
@@ -3,7 +3,7 @@ import { NativeModules } from 'react-native';
 import { IStore } from '../../app/types';
 import Platform from '../../base/react/Platform.native';
 
-import { ENTER_PICTURE_IN_PICTURE } from './actionTypes';
+import { ENABLE_IOS_PIP, ENTER_PICTURE_IN_PICTURE } from './actionTypes';
 import { isPipEnabled } from './functions';
 import logger from './logger';
 
@@ -22,21 +22,30 @@ export function enterPictureInPicture() {
         // XXX At the time of this writing this action can only be dispatched by
         // the button which is on the conference view, which means that it's
         // fine to enter PiP mode.
-        if (isPipEnabled(getState())) {
-            const { PictureInPicture } = NativeModules;
-            const p
-                = Platform.OS === 'android'
-                    ? PictureInPicture
+        const { enableIosPIP } = getState()['features/mobile/picture-in-picture'];
+
+        if (Platform.OS === 'ios') {
+            dispatch({
+                type: ENABLE_IOS_PIP,
+                enableIosPIP: !enableIosPIP });
+        }
+
+        if (Platform.OS === 'android') {
+            if (isPipEnabled(getState())) {
+                const { PictureInPicture } = NativeModules;
+                const p
+                    = Platform.OS === 'android' ? PictureInPicture
                         ? PictureInPicture.enterPictureInPicture()
                         : Promise.reject(
                             new Error('Picture-in-Picture not supported'))
                     : Promise.resolve();
 
-            p.catch((e: string) => logger.warn(`Error entering PiP mode: ${e}`));
+                p.catch((e: string) => logger.warn(`Error entering PiP mode: ${e}`));
 
-            // We should still dispatch ENTER_PICTURE_IN_PICTURE for cases where
-            // the external app needs to handle the event (ie. react-native-sdk)
-            p.finally(() => dispatch({ type: ENTER_PICTURE_IN_PICTURE }));
+                // We should still dispatch ENTER_PICTURE_IN_PICTURE for cases where
+                // the external app needs to handle the event (ie. react-native-sdk)
+                p.finally(() => dispatch({ type: ENTER_PICTURE_IN_PICTURE }));
+            }
         }
     };
 }
diff --git a/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
index a59eea589f6a..acdc1490e874 100644
--- a/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
+++ b/react/features/mobile/picture-in-picture/components/PictureInPictureButton.ts
@@ -1,14 +1,14 @@
 import { connect } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
-import { PIP_WHILE_SCREEN_SHARING_ENABLED } from '../../../base/flags/constants';
-import { getFeatureFlag } from '../../../base/flags/functions';
+// import { PIP_WHILE_SCREEN_SHARING_ENABLED } from '../../../base/flags/constants';
+// import { getFeatureFlag } from '../../../base/flags/functions';
 import { translate } from '../../../base/i18n/functions';
 import { IconArrowDown } from '../../../base/icons/svg';
 import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
-import { isLocalVideoTrackDesktop } from '../../../base/tracks/functions.native';
+// import { isLocalVideoTrackDesktop } from '../../../base/tracks/functions.native';
 import { enterPictureInPicture } from '../actions';
-import { isPipEnabled } from '../functions';
+// import { isPipEnabled } from '../functions';
 
 interface IProps extends AbstractButtonProps {
 
@@ -58,12 +58,12 @@ class PictureInPictureButton extends AbstractButton<IProps> {
  * }}
  */
 function _mapStateToProps(state: IReduxState) {
-    const pipEnabled = isPipEnabled(state);
-    const pipWhileScreenSharingEnabled = getFeatureFlag(state, PIP_WHILE_SCREEN_SHARING_ENABLED, false);
-    const enabled = pipEnabled && (!isLocalVideoTrackDesktop(state) || pipWhileScreenSharingEnabled);
+    // const pipEnabled = isPipEnabled(state);
+    // const pipWhileScreenSharingEnabled = getFeatureFlag(state, PIP_WHILE_SCREEN_SHARING_ENABLED, false);
+    // const enabled = pipEnabled && (!isLocalVideoTrackDesktop(state) || pipWhileScreenSharingEnabled);
 
     return {
-        _enabled: enabled
+        _enabled: true
     };
 }
 
diff --git a/react/features/mobile/picture-in-picture/middleware.native.ts b/react/features/mobile/picture-in-picture/middleware.native.ts
new file mode 100644
index 000000000000..0835a1ddb32d
--- /dev/null
+++ b/react/features/mobile/picture-in-picture/middleware.native.ts
@@ -0,0 +1,26 @@
+import MiddlewareRegistry from '../../base/redux/MiddlewareRegistry';
+import { APP_STATE_CHANGED } from '../background/actionTypes';
+
+import { ENABLE_IOS_PIP } from './actionTypes';
+
+MiddlewareRegistry.register(store => next => action => {
+    const result = next(action);
+
+    switch (action.type) {
+    case APP_STATE_CHANGED: {
+        const state = store.getState();
+        const { dispatch } = store;
+        const { appState } = state['features/background'];
+
+        if (appState === 'inactive') {
+            dispatch({
+                type: ENABLE_IOS_PIP,
+                enableIosPIP: false
+            });
+        }
+        break;
+    }
+    }
+
+    return result;
+});
diff --git a/react/features/mobile/picture-in-picture/reducer.ts b/react/features/mobile/picture-in-picture/reducer.ts
new file mode 100644
index 000000000000..934a88c52cc0
--- /dev/null
+++ b/react/features/mobile/picture-in-picture/reducer.ts
@@ -0,0 +1,31 @@
+import ReducerRegistry from '../../base/redux/ReducerRegistry';
+
+import { ENABLE_IOS_PIP } from './actionTypes';
+
+const DEFAULT_STATE = {
+    enableIosPIP: false
+};
+
+export interface IMobilePictureInPictureState {
+    enableIosPIP: boolean;
+}
+
+const STORE_NAME = 'features/mobile/picture-in-picture';
+
+// eslint-disable-next-line max-len
+ReducerRegistry.register<IMobilePictureInPictureState>(STORE_NAME, (state = DEFAULT_STATE, action): IMobilePictureInPictureState => {
+    switch (action.type) {
+
+    case ENABLE_IOS_PIP: {
+        const { enableIosPIP } = action;
+
+        return {
+            ...state,
+            enableIosPIP
+        };
+    }
+
+    default:
+        return state;
+    }
+});
diff --git a/react/features/prejoin/components/native/Prejoin.tsx b/react/features/prejoin/components/native/Prejoin.tsx
index bc71101e093c..337f6fd52701 100644
--- a/react/features/prejoin/components/native/Prejoin.tsx
+++ b/react/features/prejoin/components/native/Prejoin.tsx
@@ -38,7 +38,7 @@ import { navigateRoot } from '../../../mobile/navigation/rootNavigationContainer
 import { screen } from '../../../mobile/navigation/routes';
 import AudioMuteButton from '../../../toolbox/components/native/AudioMuteButton';
 import VideoMuteButton from '../../../toolbox/components/native/VideoMuteButton';
-import { isDisplayNameRequired, isRoomNameEnabled } from '../../functions';
+import { isDisplayNameRequired, isRoomNameEnabled } from '../../functions.native';
 import { IPrejoinProps } from '../../types';
 import { hasDisplayName } from '../../utils';