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 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,
}
});