# RTCView zOrder not working

**URL:** <https://react-native-webrtc.discourse.group/t/rtcview-zorder-not-working/1352>\
**Category:** Help\
**Created:** [September 9, 2021, 4:31pm UTC](https://react-native-webrtc.discourse.group/t/rtcview-zorder-not-working/1352 "2021-09-09T16:31:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pandazaur](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/pandazaur/32/507_2.png) [@Pandazaur](https://react-native-webrtc.discourse.group/u/Pandazaur)\
**Post date:** [September 9, 2021, 4:31pm UTC](https://react-native-webrtc.discourse.group/t/rtcview-zorder-not-working/1352/1 "2021-09-09T16:31:25Z")

</div>

Hello,

I have two `RTCView` on my screen (remote & local), but it looks like the zOrder has no effect on my views.

```auto
<View style={{ position: 'relative', flex: 1, padding: 20, backgroundColor: 'black' }}>
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                <RTCView
                    mirror
                    style={{ width, height: '90%', zIndex: 0, opacity: remoteStream ? 1 : 0 }}
                    streamURL={remoteStream?.toURL?.() || ''}
                    zOrder={1}
                />
            </View>

            {!!localStream && (
                <LocalSteamPreview
                    localStream={localStream}
                    isReduced={!!remoteStream}
                />
            )}
</View>

```

LocalStreamPreview.tsx:

```auto
import React, { useEffect, useMemo, useState } from 'react'
import { View, StyleSheet } from 'react-native'
import { MediaStream, RTCView } from 'react-native-webrtc'

type Props = {
    localStream: MediaStream
    isReduced: boolean
}

const Z_INDEX = 10000

export default function LocalSteamPreview(props: Props) {
    return (
        <RTCView
            mirror
            streamURL={props?.localStream?.toURL?.() || ''}
            style={props.isReduced ? styles.streamReduced : styles.streamSizeFullScreen}
            zOrder={Z_INDEX}
        />
    )
}

const styles = StyleSheet.create({
    streamSizeFullScreen: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        height: '100%',
        width: '100%',
        zIndex: Z_INDEX,
    },
    streamReduced: {
        position: 'absolute',
        bottom: 30,
        right: 10,
        height: 200,
        width: 150,
        zIndex: Z_INDEX,
        borderWidth: 5,
        borderColor: 'red',
    },
})

```

The local view is always under the remote view even if the local view has a higher zOrder. Do you guys know what is going on ? I’m testing on Android, and I tried many ways but nothing work

Thank you