search

TheWidlarzGroup / react-native-video

A <Video /> component for react-native
https://docs.thewidlarzgroup.com/react-native-video/
MIT License
7.23k stars 2.9k forks source link

[BUG]: iOS infinite loop with react native 0.76 #4270

Open DeAtHhAwK-1999 opened 3 weeks ago

DeAtHhAwK-1999 commented 3 weeks ago

Version

^6.7.0

What platforms are you having the problem on?

iOS

System Version

^0.76.1

On what device are you experiencing the issue?

Real device, Simulator

Architecture

New architecture with interop layer

What happened?

iOS doesn't access any of the internal function and keep loading except the onLayout {"_dispatchInstances": {"_debugHookTypes": null, "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": [Array], "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "actualDuration": 1.3437069654464722, "actualStartTime": 101610388.838375, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Object], "flags": 4194309, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": [Object], "mode": 3, "pendingProps": [Object], "ref": [Function ref], "refCleanup": null, "return": [FiberNode], "selfBaseDuration": 0.21000000834465027, "sibling": null, "stateNode": null, "subtreeFlags": 3146241, "tag": 11, "treeBaseDuration": 0.3764999806880951, "type": [Object], "updateQueue": [Object]}, "actualDuration": 0.4639579951763153, "actualStartTime": 101610389.097541, "alternate": null, "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTVideo", "flags": 3146240, "index": 0, "key": null, "lanes": 0, "memoizedProps": {"controls": true, "disableFocus": true, "fullscreen": false, "ignoreSilentSwitch": "obey", "onAudioFocusChanged": undefined, "onAudioTracks": undefined, "onControlsVisibilityChange": undefined, "onGetLicense": undefined, "onLayout": [Function onLayout], "onPictureInPictureStatusChanged": undefined, "onPlaybackRateChange": undefined, "onReadyForDisplay": [Function anonymous], "onReceiveAdEvent": undefined, "onRestoreUserInterfaceForPictureInPictureStop": undefined, "onTextTrackDataChanged": undefined, "onTextTracks": undefined, "onTimedMetadata": undefined, "onVideoAspectRatio": undefined, "onVideoAudioBecomingNoisy": undefined, "onVideoBandwidthUpdate": undefined, "onVideoBuffer": [Function anonymous], "onVideoEnd": undefined, "onVideoError": [Function anonymous], "onVideoExternalPlaybackChange": undefined, "onVideoFullscreenPlayerDidDismiss": undefined, "onVideoFullscreenPlayerDidPresent": undefined, "onVideoFullscreenPlayerWillDismiss": undefined, "onVideoFullscreenPlayerWillPresent": undefined, "onVideoIdle": [Function onIdle], "onVideoLoad": [Function anonymous], "onVideoLoadStart": [Function anonymous], "onVideoPlaybackStateChanged": undefined, "onVideoProgress": [Function anonymous], "onVideoSeek": undefined, "onVideoTracks": undefined, "onVolumeChange": undefined, "playInBackground": false, "playWhenInactive": false, "repeat": false, "resizeMode": "contain", "restoreUserInterfaceForPIPStopCompletionHandler": undefined, "selectedAudioTrack": undefined, "selectedTextTrack": undefined, "selectedVideoTrack": undefined, "shutterColor": undefined, "src": [Object], "style": [Object], "viewType": 1, "volume": 1}, "memoizedState": null, "mode": 3, "pendingProps": {"controls": true, "disableFocus": true, "fullscreen": false, "ignoreSilentSwitch": "obey", "onAudioFocusChanged": undefined, "onAudioTracks": undefined, "onControlsVisibilityChange": undefined, "onGetLicense": undefined, "onLayout": [Function onLayout], "onPictureInPictureStatusChanged": undefined, "onPlaybackRateChange": undefined, "onReadyForDisplay": [Function anonymous], "onReceiveAdEvent": undefined, "onRestoreUserInterfaceForPictureInPictureStop": undefined, "onTextTrackDataChanged": undefined, "onTextTracks": undefined, "onTimedMetadata": undefined, "onVideoAspectRatio": undefined, "onVideoAudioBecomingNoisy": undefined, "onVideoBandwidthUpdate": undefined, "onVideoBuffer": [Function anonymous], "onVideoEnd": undefined, "onVideoError": [Function anonymous], "onVideoExternalPlaybackChange": undefined, "onVideoFullscreenPlayerDidDismiss": undefined, "onVideoFullscreenPlayerDidPresent": undefined, "onVideoFullscreenPlayerWillDismiss": undefined, "onVideoFullscreenPlayerWillPresent": undefined, "onVideoIdle": [Function onIdle], "onVideoLoad": [Function anonymous], "onVideoLoadStart": [Function anonymous], "onVideoPlaybackStateChanged": undefined, "onVideoProgress": [Function anonymous], "onVideoSeek": undefined, "onVideoTracks": undefined, "onVolumeChange": undefined, "playInBackground": false, "playWhenInactive": false, "repeat": false, "resizeMode": "contain", "restoreUserInterfaceForPIPStopCompletionHandler": undefined, "selectedAudioTrack": undefined, "selectedTextTrack": undefined, "selectedVideoTrack": undefined, "shutterColor": undefined, "src": [Object], "style": [Object], "viewType": 1, "volume": 1}, "ref": {"current": [ReactFabricHostComponent]}, "refCleanup": null, "return": {"_debugHookTypes": null, "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "actualDuration": 1.1014999449253082, "actualStartTime": 101610389.081083, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 0, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 3, "pendingProps": [Object], "ref": null, "refCleanup": null, "return": [FiberNode], "selfBaseDuration": 0.015666991472244263, "sibling": null, "stateNode": [Object], "subtreeFlags": 3146241, "tag": 5, "treeBaseDuration": 0.13637496531009674, "type": "RCTView", "updateQueue": null}, "selfBaseDuration": 0.003457993268966675, "sibling": {"_debugHookTypes": [Array], "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "actualDuration": 0.5222919583320618, "actualStartTime": 101610389.563958, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": [Object], "elementType": [Object], "flags": 1048577, "index": 1, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 3, "pendingProps": [Object], "ref": null, "refCleanup": null, "return": [FiberNode], "selfBaseDuration": 0.03312499821186066, "sibling": null, "stateNode": null, "subtreeFlags": 1, "tag": 11, "treeBaseDuration": 0.1172499805688858, "type": [Object], "updateQueue": null}, "stateNode": {"canonical": [Object], "node": [Object]}, "subtreeFlags": 0, "tag": 5, "treeBaseDuration": 0.003457993268966675, "type": "RCTVideo", "updateQueue": null}, "_dispatchListeners": [Function onLayout], "_targetInst": {"_debugHookTypes": null, "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": [Array], "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "actualDuration": 1.3437069654464722, "actualStartTime": 101610388.838375, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Object], "flags": 4194309, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": [Object], "mode": 3, "pendingProps": [Object], "ref": [Function ref], "refCleanup": null, "return": [FiberNode], "selfBaseDuration": 0.21000000834465027, "sibling": null, "stateNode": null, "subtreeFlags": 3146241, "tag": 11, "treeBaseDuration": 0.3764999806880951, "type": [Object], "updateQueue": [Object]}, "actualDuration": 0.4639579951763153, "actualStartTime": 101610389.097541, "alternate": null, "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTVideo", "flags": 3146240, "index": 0, "key": null, "lanes": 0, "memoizedProps": {"controls": true, "disableFocus": true, "fullscreen": false, "ignoreSilentSwitch": "obey", "onAudioFocusChanged": undefined, "onAudioTracks": undefined, "onControlsVisibilityChange": undefined, "onGetLicense": undefined, "onLayout": [Function onLayout], "onPictureInPictureStatusChanged": undefined, "onPlaybackRateChange": undefined, "onReadyForDisplay": [Function anonymous], "onReceiveAdEvent": undefined, "onRestoreUserInterfaceForPictureInPictureStop": undefined, "onTextTrackDataChanged": undefined, "onTextTracks": undefined, "onTimedMetadata": undefined, "onVideoAspectRatio": undefined, "onVideoAudioBecomingNoisy": undefined, "onVideoBandwidthUpdate": undefined, "onVideoBuffer": [Function anonymous], "onVideoEnd": undefined, "onVideoError": [Function anonymous], "onVideoExternalPlaybackChange": undefined, "onVideoFullscreenPlayerDidDismiss": undefined, "onVideoFullscreenPlayerDidPresent": undefined, "onVideoFullscreenPlayerWillDismiss": undefined, "onVideoFullscreenPlayerWillPresent": undefined, "onVideoIdle": [Function onIdle], "onVideoLoad": [Function anonymous], "onVideoLoadStart": [Function anonymous], "onVideoPlaybackStateChanged": undefined, "onVideoProgress": [Function anonymous], "onVideoSeek": undefined, "onVideoTracks": undefined, "onVolumeChange": undefined, "playInBackground": false, "playWhenInactive": false, "repeat": false, "resizeMode": "contain", "restoreUserInterfaceForPIPStopCompletionHandler": undefined, "selectedAudioTrack": undefined, "selectedTextTrack": undefined, "selectedVideoTrack": undefined, "shutterColor": undefined, "src": [Object], "style": [Object], "viewType": 1, "volume": 1}, "memoizedState": null, "mode": 3, "pendingProps": {"controls": true, "disableFocus": true, "fullscreen": false, "ignoreSilentSwitch": "obey", "onAudioFocusChanged": undefined, "onAudioTracks": undefined, "onControlsVisibilityChange": undefined, "onGetLicense": undefined, "onLayout": [Function onLayout], "onPictureInPictureStatusChanged": undefined, "onPlaybackRateChange": undefined, "onReadyForDisplay": [Function anonymous], "onReceiveAdEvent": undefined, "onRestoreUserInterfaceForPictureInPictureStop": undefined, "onTextTrackDataChanged": undefined, "onTextTracks": undefined, "onTimedMetadata": undefined, "onVideoAspectRatio": undefined, "onVideoAudioBecomingNoisy": undefined, "onVideoBandwidthUpdate": undefined, "onVideoBuffer": [Function anonymous], "onVideoEnd": undefined, "onVideoError": [Function anonymous], "onVideoExternalPlaybackChange": undefined, "onVideoFullscreenPlayerDidDismiss": undefined, "onVideoFullscreenPlayerDidPresent": undefined, "onVideoFullscreenPlayerWillDismiss": undefined, "onVideoFullscreenPlayerWillPresent": undefined, "onVideoIdle": [Function onIdle], "onVideoLoad": [Function anonymous], "onVideoLoadStart": [Function anonymous], "onVideoPlaybackStateChanged": undefined, "onVideoProgress": [Function anonymous], "onVideoSeek": undefined, "onVideoTracks": undefined, "onVolumeChange": undefined, "playInBackground": false, "playWhenInactive": false, "repeat": false, "resizeMode": "contain", "restoreUserInterfaceForPIPStopCompletionHandler": undefined, "selectedAudioTrack": undefined, "selectedTextTrack": undefined, "selectedVideoTrack": undefined, "shutterColor": undefined, "src": [Object], "style": [Object], "viewType": 1, "volume": 1}, "ref": {"current": [ReactFabricHostComponent]}, "refCleanup": null, "return": {"_debugHookTypes": null, "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "actualDuration": 1.1014999449253082, "actualStartTime": 101610389.081083, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTView", "flags": 0, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 3, "pendingProps": [Object], "ref": null, "refCleanup": null, "return": [FiberNode], "selfBaseDuration": 0.015666991472244263, "sibling": null, "stateNode": [Object], "subtreeFlags": 3146241, "tag": 5, "treeBaseDuration": 0.13637496531009674, "type": "RCTView", "updateQueue": null}, "selfBaseDuration": 0.003457993268966675, "sibling": {"_debugHookTypes": [Array], "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "actualDuration": 0.5222919583320618, "actualStartTime": 101610389.563958, "alternate": null, "child": [FiberNode], "childLanes": 0, "deletions": null, "dependencies": [Object], "elementType": [Object], "flags": 1048577, "index": 1, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 3, "pendingProps": [Object], "ref": null, "refCleanup": null, "return": [FiberNode], "selfBaseDuration": 0.03312499821186066, "sibling": null, "stateNode": null, "subtreeFlags": 1, "tag": 11, "treeBaseDuration": 0.1172499805688858, "type": [Object], "updateQueue": null}, "stateNode": {"canonical": [Object], "node": [Object]}, "subtreeFlags": 0, "tag": 5, "treeBaseDuration": 0.003457993268966675, "type": "RCTVideo", "updateQueue": null}, "bubbles": undefined, "cancelable": undefined, "currentTarget": {"__internalInstanceHandle": {"_debugHookTypes": null, "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "actualDuration": 0.4639579951763153, "actualStartTime": 101610389.097541, "alternate": null, "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTVideo", "flags": 3146240, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 3, "pendingProps": [Object], "ref": [Object], "refCleanup": null, "return": [FiberNode], "selfBaseDuration": 0.003457993268966675, "sibling": [FiberNode], "stateNode": [Object], "subtreeFlags": 0, "tag": 5, "treeBaseDuration": 0.003457993268966675, "type": "RCTVideo", "updateQueue": null}, "__nativeTag": 1398, "_viewConfig": {"Commands": [Object], "Constants": [Object], "Manager": "VideoManager", "NativeProps": [Object], "baseModuleName": "RCTView", "bubblingEventTypes": [Object], "directEventTypes": [Object], "uiViewClassName": "RCTVideo", "validAttributes": [Object]}}, "defaultPrevented": undefined, "dispatchConfig": {"registrationName": "onLayout"}, "eventPhase": undefined, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": undefined, "nativeEvent": {"layout": {"height": 0, "width": 0, "x": 0, "y": 0}, "target": 1398}, "target": {"__internalInstanceHandle": {"_debugHookTypes": null, "_debugInfo": null, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "actualDuration": 0.4639579951763153, "actualStartTime": 101610389.097541, "alternate": null, "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "RCTVideo", "flags": 3146240, "index": 0, "key": null, "lanes": 0, "memoizedProps": [Object], "memoizedState": null, "mode": 3, "pendingProps": [Object], "ref": [Object], "refCleanup": null, "return": [FiberNode], "selfBaseDuration": 0.003457993268966675, "sibling": [FiberNode], "stateNode": [Object], "subtreeFlags": 0, "tag": 5, "treeBaseDuration": 0.003457993268966675, "type": "RCTVideo", "updateQueue": null}, "__nativeTag": 1398, "_viewConfig": {"Commands": [Object], "Constants": [Object], "Manager": "VideoManager", "NativeProps": [Object], "baseModuleName": "RCTView", "bubblingEventTypes": [Object], "directEventTypes": [Object], "uiViewClassName": "RCTVideo", "validAttributes": [Object]}}, "timeStamp": 1730389000760, "type": undefined} this is the onLayout log

Reproduction Link

repository link

Reproduction

Step to reproduce this bug are:

github-actions[bot] commented 3 weeks ago

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

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

Note: issues without complete information have a lower priority

There is a newer version of the library available. You are using version ^6.7.0, while the latest stable version is 6.7.0. Please update to the latest version and check if the issue still exists.

Note: If the issue still exists, please update the issue report with the latest information.

nalinsakthivel commented 2 weeks ago

I am also facing this issue. Does anyone have a solution?

DeAtHhAwK-1999 commented 2 weeks ago

I already use version 6.7.0 and the arrow is not even do anything cause it is the latest version, but when go to the react native 0.75 version it working good but is not a solution so please solve this :)

nalinsakthivel commented 2 weeks ago

I already use version 6.7.0 and the arrow is not even do anything cause it is the latest version, but when go to the react native 0.75 version it working good but is not a solution so please solve this :)

@DeAtHhAwK-1999 Yes, now I have reverted to RN 0.75.4.

freeboub commented 2 weeks ago

I don't reproduce the issue on sample I just build. It would be useful to provide a sample app source code

DeAtHhAwK-1999 commented 2 weeks ago

@freeboub you can check this is the component code 

import {appColors} from '@constants/colors';
import React, {useCallback} from 'react';
import {StyleSheet} from 'react-native';
import Video, {
  OnProgressData,
  OnVideoErrorData,
  ReactVideoProps,
  ReactVideoSource,
  VideoRef,
} from 'react-native-video';

interface VideoPlayerProps extends ReactVideoProps {
  onVideoReady: (ref: VideoRef) => void;
  uri: ReactVideoSource['uri'];
}

const VideoView = ({
  uri,
  onVideoReady,
  fullscreen,
  repeat,
  controls,
  onReadyForDisplay,
  renderLoader,
}: VideoPlayerProps): React.JSX.Element => {
  const onError = useCallback((error: OnVideoErrorData) => {
    console.log('Video Error =>', error);
  }, []);

  return (
    <Video
      // Can be a URL or a local file.
      source={{uri: uri}}
      // Store reference
      ref={(ref: VideoRef) => onVideoReady(ref)}
      // Callback when video cannot be loaded
      onError={onError}
      disableFocus
      repeat={repeat}
      fullscreen={fullscreen}
      style={styles.backgroundVideo}
      playWhenInactive={false}
      playInBackground={false}
      renderLoader={renderLoader}
      volume={1.0}
      resizeMode={'contain'}
      ignoreSilentSwitch={'obey'}
      onReadyForDisplay={onReadyForDisplay}
      controls={controls}
      onProgress={(progress: OnProgressData) => {
        console.log('progress =>', progress);
      }}
    />
  );
};

export default VideoView;

const styles = StyleSheet.create({
  backgroundVideo: {
    flex: 1,
    backgroundColor: appColors.black,
  },
});
DeAtHhAwK-1999 commented 6 days ago

still the same issue with the new version 6.8.0, I am sure that the problem is because of the react native new architecture

freeboub commented 1 day ago

I have just updated the sample of the repo to react native 0.76.2 with newArch, I don't see the issue... Can you please provide a sample git repo reproducing the issue ?