Open a view between two views

Question

I have an application similar to a facebook feed with videos in them. I use react-native-video to render the video. Now, to make a full-screen video preview, I wrapped the component in another component. This other component has TouchableHightlight. A new route is created in the onPress TouchableHighlight event, and this .props.children is passed as the props for the component on the route. A new component that displays {this.props.children}. But this leads to disabling the completed Video component and restoring it to a new view (i.e., it calls the component constructor again). This causes the video to load and start from its original position instead of using the same component and saving buffered data and resuming them from there.

Link to the demo project: https://github.com/shahankit/video-player-fullscreen

I need something similar to the default player controls that are built in when prop control is passed.

These methods for creating a component in full-screen mode are taken from react-native-lightbox

Answer 1

Create view hierarchies similar to the following.

- Root View(position: absolute) - Your old entire screen layout which small video view is inside of it. - Your fullscreen video view with opacity = 0 with more zIndex 

then use onPress to view a small video to toggle the opacity of full-screen video viewing.