I have been working with react-native and expo-video to implement a video in a bottom sheet. The app is working as expected, but when i go to reload expo, as i am using my own device (android) for development, i am getting an error everytime I reload:

ERROR Error: Exception in HostObject::get for prop 'NativeUnimoduleProxy': java.lang.IllegalStateException: Player is accessed on the wrong thread. Current thread: 'mqt_js' Expected thread: 'main' See , js engine: hermes

also: ERROR Invariant Violation: "main" has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

As i stated, the app is working as expected, but when i go to do an eas build it fails and I know it is due to this error. I have been searching and googling and tried wrapping state updates in runOnJs, etc and to no avail I can't get past this. Has anyone else experienced this and if so how did you resolve it?

from my searches it seems like no one has been able to solve this issue or at least i have not stumbled across an explanation or way to solve this. i am pulling my hair out. Can anyone offer other suggestions?

I tried implementing runOnJS from react- native-reanimated and wrapping state updates in that and was expecting it to work, but it still has proven fruitless.

 const [volume, setVolume] = useState(0.2);
  const [currentTime, setCurrentTime] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);

  const navigation = useNavigation();
  const ref = useRef(null);

  const player = useVideoPlayer(VideoSource, (player) => {
    player.loop = false;
  });

  useEffect(() => {
    const videoSubscription = player.addListener(
      'playingChange',
      (isPlaying) => {
        setIsPlaying(isPlaying);
      }
    );

    const onEndVideoSubscription = player.addListener('end', () => {
      setIsPlaying(false);
    });

    return () => {
      videoSubscription.remove();
      onEndVideoSubscription.remove();
    };
  }, [player]);

  // Set duration when video is loaded
  useEffect(() => {
    if (player) {
      player.volume = volume;
    }
  }, [volume, player]);

  // Update current time periodically
  useEffect(() => {
    const interval = setInterval(() => {
      if (player && player.currentTime) {
        setCurrentTime(player.currentTime); // Current playback time in seconds
      }
    }, 1000);

    return () => clearInterval(interval); // Cleanup interval on unmount
  }, [player]);

  const togglePlay = () => {
    if (!isPlaying) {
      player.play();
    } else {
      player.pause();
    }
    setIsPlaying(!isPlaying);
  };

  const formatTime = (seconds) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
  };

  const handleSliderChange = (value) => {
    if (player && length) {
      const targetPositionMillis = value * length; // Calculate the target position in milliseconds
      const currentPositionMillis = player.currentTime; // Get the current playback position

      const difference = targetPositionMillis - currentPositionMillis; // Calculate the difference
      player.seekBy(difference); // Seek by the difference in time
      setCurrentTime(targetPositionMillis); // Update current time for display
    }
  };

  const handleVolumeChange = (value) => {
    player.volume = value;
  };

  const handleResetVideo = () => {
    if (player) {
      const currentTime = player.currentTime;
      player.seekBy(-currentTime); // Reset to the beginning
      player.pause();
      setIsPlaying(false);
    }
  };