CODEWITHSUNDEEP
videoreactjsreact-nativefullscreen
meteors
meteors

Reputation: 1827

Share view between two views react-native

I have an app similar to facebook feed with videos in them. I'm using react-native-video to render videos. Now to make the video fullscreen I have wrapped the component into another component. This another component has a TouchableHightlight. Within the onPress event of TouchableHighlight, a new route is created and this.props.children is passed as props to component in the route. The new component just a which renders {this.props.children}. But this causes the wrapped Video component to unmount and it gets reconstructed in the new view (i.e. it calls the constructor of the component again). This causes the video to load and start from initial position instead of using the same component and storing the buffered data and resuming from where it left.

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

I want something similar to default player controls which comes embedded when controls prop is passed.

This methods of making component go fullscreen is taken from react-native-lightbox

Upvotes: 6

Views: 1087

Answers (1)

Nantaphop
Nantaphop

Reputation: 564

Create View Hierarchies similar to 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 on small video view to switch the opacity of the fullscreen video view

Upvotes: 0

Related Questions