Hello,
I have two RTCView
on my screen (remote & local), but it looks like the zOrder has no effect on my views.
<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:
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