Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change parent of react native video component without unmounting

Tags:

react-native

I am attempting to create picture in picture functionality on iPhone in react native using the react-native-video component. I have two elements, one is the video player, and the other is an image absolutely positioned on top of the player in the lower right corner.

<View style={{ position: 'relative' }}>
    <View>
        { this.props.swapPip ? renderVideoPlayer() : renderPip() }
    </View>
    <View style={{ position: 'absolute', bottom: 16, right: 16 }}>
        { this.props.swapPip ? renderPip() : renderVideoPlayer() }
    </View>
</View>

I would like to play the video, and then mid-play, and be able to switch the swapPip property so that the video is now the pip and the image is in the main view. The catch is the video must continue to play smoothly through the transition. Currently it is re-mounting each time the swap happens, losing the video and causing an annoying reload and other unwanted side effects. Is this possible to achieve?

Here is a rough image of the idea. The gray boxes represent the video player, the pink represents the image. Clicking on the smaller box (whatever color) will swap the two back and forth. Swapping should be allowed at any time, and if a video happens to be playing during a swap, playback should not be interrupted in any way.

enter image description here

like image 246
Rob Allsopp Avatar asked Nov 01 '16 22:11

Rob Allsopp


1 Answers

I guess this turned out to be a dumb question, because zIndex is actually a thing in react-native now. Its in the docs and everything, and works exactly like you would expect:

const pipPosition = { position: 'absolute', bottom: 16, right: 16, zIndex: 99 };
const sourceAPosition = this.props.swapPip ? pipPosition : {};
const sourceBPosition = !this.props.swapPip ? pipPosition : {};

<View style={{ position: 'relative' }}>
    <View style={sourceAPosition}>
        { renderSourceA() }
    </View>
    <View style={sourceBPosition}>
        { renderSourceB() }
    </View>
</View>

For some reason I was under the impression zIndex did not exist/work in react-native, and that the ordering of your elements was the only way to accomplish layering...

like image 122
Rob Allsopp Avatar answered Oct 11 '22 06:10

Rob Allsopp