I am working on a video player package based on the Expo.Video library. It is available as an NPM package called
react-native-video-player-no-linking. The code for the package is available on GitHub here. I’ve tested the package with a simple test application that is also available as part of the same GitHub repo. Using the package with the simple test application produces the desired results as shown in the normal and full screen video images below:
I published the test application, and it is available here.
However, when using the same package in the same manner in a more complicated full featured application, I get a video image that is not centered, nor scaled to fit the player even though both the package uses
Video.RESIZE_MODE_CONTAIN as a default value. The following two images display the results of using the same code in the full featured application:
As you can see, the video is justified to the left. Additionally, it no longer follows the Video.RESIZE_MODE_CONTAIN rules
I’ve tried to figure out what was causing the difference by performing the following troubleshooting steps:
- I confirmed that the same packages and versions are being used in the simple test app and full featured app. Both apps are built using Expo v31.0.1 and share the same version of shared packages in package.json
- I copied the code for the video playing screen component in the correctly working test app, and pasted it into the full featured app. This means that both applications are using the same code in the component that contains the
So far, none of my troubleshooting has been successful.
The only differences between the test app and the full featured app are the navigation setup, and difference in the number of ‘screens’. The full featured app has a more complicated navigation structure and has more screens. However, both apps use the same version of react-navigation as specified in the v31 upgrade blog post here. Another difference is the header bar at the top of the screen, though that shouldn’t make a difference in how the player behaves…
Bottom line is that I’m getting two different results out of two different applications using the same package and code to implement that package, and that should not be happening.
So, if you’ve read through all this, thank you for take the time to do so. Do you have any idea what might be causing this problem?