'React Native Teleport components without loosing state
I am using React Native 0.62 with react-native-video.
I need to add a video player with full screen option. The requirements specifically needs custom controls in both normal view and full screen. The native full screen in IOS doesn't allow custom controls, therefore I have developed a in house solution for a full screen video by showing it inside a modal. Here the problem starts...
When moving the component from normal view to full screen inside a modal, it looses all its internal reference and state. I was able to recover most of it (like progress and play/pause state) by taking those outside the player. However i am still loosing all the video caching and buffering, and the video reloads again.
Can anyone suggest a way I can move a component in DOM without loosing its internal state?
Things I have tried so far:
- Providing key to component
- UseContext to render the player in the parent and use a wrapperComponent to have the modal around it.
- Looked into portal, but couldn't find any possible solution for this problem.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|