[BUG]: Black screen when </Video> unmount

[quangtuan28200]

Version

6.6.2

What platforms are you having the problem on?

Android

System Version

10

On what device are you experiencing the issue?

Real device

Architecture

New architecture with interop layer

What happened?

Black screen when Video unmounts:

https://github.com/user-attachments/assets/96c48fad-23d5-40c1-a11e-72a85a9a3d19

It's happen on old devices, with Android 14, I tested and it's normal, I can fix that by setting viewType={ViewType.TEXTURE} but sometimes I get this error:

{ "errorStackTrace": "androidx.media3.exoplayer.ExoPlaybackException: Unexpected runtime error\n\tat androidx.media3.exoplayer.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:668)\n\tat android.os.Handler.dispatchMessage(Handler.java:103)\n\tat android.os.Looper.loop(Looper.java:213)\n\tat android.os.HandlerThread.run(HandlerThread.java:67)\nCaused by: java.lang.IllegalArgumentException\n\tat android.media.MediaCodec.native_setSurface(Native Method)\n\tat android.media.MediaCodec.setOutputSurface(MediaCodec.java:2042)\n\tat androidx.media3.exoplayer.mediacodec.SynchronousMediaCodecAdapter.setOutputSurface(SynchronousMediaCodecAdapter.java:191)\n\tat androidx.media3.exoplayer.video.MediaCodecVideoRenderer.setOutputSurfaceV23(MediaCodecVideoRenderer.java:1723)\n\tat androidx.media3.exoplayer.video.MediaCodecVideoRenderer.setOutput(MediaCodecVideoRenderer.java:736)\n\tat androidx.media3.exoplayer.video.MediaCodecVideoRenderer.handleMessage(MediaCodecVideoRenderer.java:661)\n\tat androidx.media3.exoplayer.ExoPlayerImplInternal.deliverMessage(ExoPlayerImplInternal.java:1626)\n\tat androidx.media3.exoplayer.ExoPlayerImplInternal.sendMessageToTarget(ExoPlayerImplInternal.java:1590)\n\tat androidx.media3.exoplayer.ExoPlayerImplInternal.sendMessageInternal(ExoPlayerImplInternal.java:1565)\n\tat androidx.media3.exoplayer.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:553)\n\t... 3 more\n", "errorCode": "21004", "errorException": "androidx.media3.exoplayer.ExoPlaybackException: Unexpected runtime error", "errorString": "ExoPlaybackException: ERROR_CODE_FAILED_RUNTIME_CHECK" }

any solution? Thanks.

Reproduction Link

don't have

Reproduction

here is a sample code:

const [open, setopen] = useState(false);
const [isLoadingVideo, setIsLoadingVideo] = useState(true);
const [video, setVideo] = useState('https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4');

<View style={{ paddingTop: 100, height: 600 }}>
    <Button
        title="TOGGLE"
        onPress={() => {
            setopen(prev => !prev);
            setIsLoadingVideo(true);
        }}
    />
    <Button
        title="NEXT"
        onPress={() => {
            setIsLoadingVideo(true);
            setVideo('https://videos.pexels.com/video-files/5752729/5752729-uhd_2560_1440_30fps.mp4');
        }}
    />
    <Button
        title="PREV"
        onPress={() => {
            setIsLoadingVideo(true);
            setVideo('https://videos.pexels.com/video-files/3195394/3195394-uhd_2560_1440_25fps.mp4');
        }}
    />
    {open && (
        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Video
                viewType={ViewType.TEXTURE}
                style={{ width: '100%', aspectRatio: 16 / 9 }}
                source={{ uri: video }}
                shutterColor="transparent"
                onReadyForDisplay={() => setIsLoadingVideo(false)}
            />
            {isLoadingVideo && <ActivityIndicator style={{ position: 'absolute' }} size="large" color={COLORS.RED} />}
        </View>
    )}
 </View>

[github-actions[bot]]

Thank you for your issue report. Please note that the following information is missing or incomplete:

• reproduction link

Please update your issue with this information to help us address it more effectively.

Note: issues without complete information have a lower priority

[github-actions[bot]]

Thank you for your issue report. Please note that the following information is missing or incomplete:

• reproduction link

Please update your issue with this information to help us address it more effectively.

Note: issues without complete information have a lower priority

[github-actions[bot]]

Thank you for your issue report. Please note that the following information is missing or incomplete:

• reproduction link

Please update your issue with this information to help us address it more effectively.

Note: issues without complete information have a lower priority

[github-actions[bot]]

Thank you for your bug report. We will review it and get back to you if we need more information.

[github-actions[bot]]

Thank you for your bug report. We will review it and get back to you if we need more information.

[github-actions[bot]]

Thank you for your bug report. We will review it and get back to you if we need more information.

[github-actions[bot]]

Thank you for your bug report. We will review it and get back to you if we need more information.

[freeboub]

can you try with this PR please: https://github.com/TheWidlarzGroup/react-native-video/pull/4185 I fixed something really similar with it.

[quangtuan28200]

can you try with this PR please: #4185 I fixed something really similar with it.

Sorry, I'm new to react-native. How can I apply that? I try yarn add react-native-video@https://github.com/freeboub/react-native-video#feat/reworkSourceStart but I got this error at import Cannot find module 'react-native-video' or its corresponding type declarations. I checked node_module and didn't see the lib folder in the react-native-video.

I'm using yarn 3.6.4 and react-native 0.74.3

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. If there won't be any activity in the next 14 days, this issue will be closed automatically.