Skip to content

[Android][v7.0.0-beta-10] First video frame briefly renders with wrong layout before snapping to final size #4925

Description

@douzal34

What happened?

On Android, the first visible frame of a video is sometimes rendered using an incorrect layout/aspect ratio before snapping to its final size.

The effect is very noticeable in TikTok-style feeds:

  1. A video becomes visible for the first time.
  2. The first frame is rendered with an incorrect size/layout.
  3. A few milliseconds later, the video snaps to the correct size.
  4. Playback continues normally.

The issue occurs during the initial rendering of a video before its final dimensions/layout appear to be applied.

If the user scrolls quickly through multiple videos, the problem becomes even more noticeable because newly loaded videos repeatedly exhibit the same behavior.

Environment: Android only, using the VideoView + useVideoPlayer API.

Expected behavior

The first visible frame should already respect the final layout and resizeMode.

No visible resize/jump should occur after the first frame is rendered.

Additional observations

  • The issue is reproducible on v7.0.0-beta.10.
  • The issue is also present on v6.19.2.
  • The issue appears to have existed on several older v6 releases as well.
  • The problem is visible with both SurfaceView and TextureView.
  • The issue mainly affects the first visible render of a video.
  • Once a video has already been loaded/prepared, the issue is usually much harder to notice.

Historical context

A very similar Android issue was previously reported here:

#3653

and was later addressed in:

#3751

From what I can see, the implementation introduced in PR #3751 was part of the Android v6 codebase and relied on code paths that no longer seem to exist in the current v7 architecture.

After upgrading to v7, the user-visible symptom appears to be back.

I am not claiming the root cause is necessarily identical, but the visual behavior is extremely similar.

Investigation notes

Based on the investigation that led to PR #3751 in the v6 codebase, my understanding is that the issue may be related to when video dimensions become available versus when the first frame is rendered.

In the current v7 architecture, HybridVideoPlayer.kt appears to be one of the most relevant places to investigate, especially around:

override fun onTracksChanged(tracks: Tracks)

since this seems to be one of the earliest points where video format information becomes available.

I am not familiar enough with the current v7 internals to determine whether this is still the correct code path, but I wanted to mention it as a possible starting point based on the previous v6 investigation.

If this is no longer the correct code path in v7, any guidance would be appreciated.

Possible areas involved:

  • PlayerView
  • VideoView
  • Media3 integration
  • resizeMode handling
  • aspect ratio updates
  • first-frame rendering timing

Tagging maintainers for visibility:

@freeboub
@KrzysztofMoch

Steps to reproduce

  1. Render a video in a feed / TikTok-style layout.
  2. Let a video become visible for the first time.
  3. Observe the first frame with an incorrect size/layout, snapping to the correct size a few ms later.
  4. Scroll quickly through multiple videos - newly loaded videos repeatedly exhibit the same behavior.

Reproduction repository

No response

react-native-video version

7.0.0-beta.10

react-native version

0.83.0

react-native-nitro-modules version

No response

Platforms

Android

OS version

No response

Device

No response

Architecture

No response

Expo

No response

Last working version

No response

Media / source type

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status
    To Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions