I have a react native project, with a screen that is built using a Flat List component. Each rendered item is an image that acts as video preview.
Tapping on the video preview swaps out the video preview image with a native video player UIView that I've bridged. The video plays, and everything is good so far.
When I press the full screen button, the video goes full screen as expected. Under the hood, the video view controller achieves this by attaching the view to the keyWindow
- (UIWindow *)topWindow {
if ([UIApplication sharedApplication].keyWindow) {
return [UIApplication sharedApplication].keyWindow;
}
return [UIApplication sharedApplication].windows.firstObject;
}
Then further down inside the toggle full screen method
[self.topWindow addSubview:self.view];
[self.topWindow makeKeyAndVisible];
Debugging the view hierarchy in Xcode, I can see the view controller has been inserted as a child of UIWindow
.
The problem
Everything at this point is fine, until I change the orientation of the device. The view is no longer present on the keyWindow, and the screen shows the FlatList again.
In the View debugger, the controller is gone:
The problem doesn't happen outside of the FlatList
To isolate the problem, I took the player outside of the flat list, made it full screen and the problem doesn't occur.
I assume the issue is caused in some way by the rendering of the flat list, if it works correctly when outside of it.
Can anyone can shed light on the root cause and whether there is a way to prevent this from happening?
Edit
Just so it's clear, the key function is set correctly on the FlatList so re-rendering should not be causing this.