# RTCView Becomes Blank

**URL:** <https://react-native-webrtc.discourse.group/t/rtcview-becomes-blank/521>\
**Category:** Help\
**Created:** [March 9, 2020, 4:40pm UTC](https://react-native-webrtc.discourse.group/t/rtcview-becomes-blank/521 "2020-03-09T16:40:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![e.sinanturan](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/e.sinanturan/32/134_2.png) [@e.sinanturan](https://react-native-webrtc.discourse.group/u/e.sinanturan)\
**Post date:** [March 9, 2020, 4:40pm UTC](https://react-native-webrtc.discourse.group/t/rtcview-becomes-blank/521/1 "2020-03-09T16:40:10Z")

</div>

Hi I am building an application that has remote and local video and audio streams those streams overlaps each other by StyleSheet.absoluteFillObject on android 6 second RTCView which is going to be local stream when there is two RTCView for local stream that overlaps each other overlapped one becomes blan/transparent and on android 9 when user starts the call overlapped one becomes blank/transparent somehow all width and height properties are set and I have a video demonstration at first both RTCViews are local stream then when they connected small one becomes local stream and big one becomes remote stream but local one disappears as I experienced on android 6 version. I have tried them on android 9 devices in emulator and having this result : [https://vimeo.com/396488504](https://vimeo.com/396488504) same result on real devices. and when I switch between tabs and open call tab back local streams appears , basicly it has weird behaviour

```
return (

    <View style={styles.container}>
        <StatusBar translucent backgroundColor="transparent" />

        { (localMember.video && !remoteMember) && <RTCView streamURL={localMember.video.toURL()} objectFit="cover" style={{width:'100%',height:'100%'}}/>}
        { (remoteMember && remoteMember.video) && <RTCView streamURL={remoteMember.video.toURL()} objectFit="cover" style={{width:'100%',height:'100%'}}/>}

        {
           connecting && <Indicator bg="#fff" color="#FF4761"/>
        }

        <View style={styles.overlay}>
            { (!videoPermission || !audioPermission) ?
                (<View style={styles.permissions}>
                    <View style={styles.icons}>
                        <Icon name="camera" type="feather" size={45} color="#eee"/>
                        <Icon name="microphone" type="font-awesome" size={45} color="#eee"/>
                    </View>
                    <View>
                        <Text style={{fontSize:25,paddingTop:10,paddingBottom:10}}>{trans.needPermissionTitle}</Text>
                    </View>
                    <View>
                        <Text style={{fontSize:18,paddingTop:10,paddingBottom:20}}>{trans.needPermission}</Text>
                    </View>
                    <View>
                        <Button title={trans.allow} buttonStyle={{width:240,backgroundColor:'#ccc'}} onPress={ ()=> { localMember.webRTC.turnOn('video'); localMember.webRTC.turnOn('audio'); } }/>
                    </View>
                </View>) :
                (
                    <View style={{flex:1}}>
                        <View style={styles.top}>

                        </View>
                        <View style={styles.middle}>
                            {
                                localMember && localMember.video && (
                                    <View style={{backgroundColor:'red',justifyContent:'flex-end',alignItems:'flex-end'}}>
                                        <RTCView streamURL={localMember.video.toURL()} style={{width:'30%',height:'70%'}} />
                                    </View>
                                )
                            }
                        </View>
                       
                    </View>
                )
            }
        </View>

    </View>

)
const styles = StyleSheet.create({
container:{
    flex:1
},
overlay:{
    ...StyleSheet.absoluteFillObject,
}
});
```

---

<div class="post-metadata">

**Author:** ![e.sinanturan](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/e.sinanturan/32/134_2.png) [@e.sinanturan](https://react-native-webrtc.discourse.group/u/e.sinanturan)\
**Post date:** [March 9, 2020, 6:03pm UTC](https://react-native-webrtc.discourse.group/t/rtcview-becomes-blank/521/2 "2020-03-09T18:03:06Z")

</div>

I have fixed the problem by setting zOrder property to each RTCView component zOrder=1 and zOrder=2 for overlaping component