[BUG] [android] [ios] loadPlaylist doesn't work intermittently

[desmondgong-mw]

Describe the bug
loadPlaylist() doesn't work intermittently, for both Android and iOS. I cannot receive any event from 'onPlayerReady' or 'onPlaylistItem'

To Reproduce

1. Initialise the player with proper config.
2. Switch playback via playerRef.current.loadPlaylist(newPlayList)
3. Check the logs for events 'onPlayerReady' or 'onPlaylistItem'

Expected behavior
The new play list should start.

Screenshots / Visual evidence
When switching between 2 different live stream by loadPlaylist(), it works most of time but fails intermittently, check the highlight ones, there were no events received from 'onPlayerReady', 'onPlay' or 'onPlayerError'.

Device(s) affected

• Device: Samsung S20 FE
• OS: Android 15
• Version: @jwplayer/jwplayer-react-native@1.1.1

Additional context
Add any other context about the problem here.

JWP Ticketing
To expedite resolution and maintain confidentiality, submit a JWP request in addition to this new Issue. A JWP request offers the following benefits:

• Associates the Issue with your company
• Permits securely share sensitive information related to the bug, request, or question
• Enhances JWP's ability to track progress and provide timely updates
• Enables you to track and manage multiple issues through a single platform

ℹ️ While Issues are valuable for open-source collaboration, a JWP request ensures that you will receive clear timelines and efficient support.

[Jmilham21]

Hey @desmondgong-mw , will you test again with 1.2.0.

Also, provide me with the streams you are switching between and how you switch between them. I've implemented the following into our Example app and have verified the switch on Android and iOS.

Example code:
https://gist.github.com/Jmilham21/1ce371987d82b5768beb74c4f1403f97

Example video:
https://github.com/user-attachments/assets/87b8be0a-7de9-4601-a737-676c155cbc3d

[desmondgong-mw]

@Jmilham21 Thanks for the reply, I've tried with 1.2.0, but it still doesn't work for iOS, I used the same stream urls you shared in the example.

Screen.Recording.2025-11-05.at.11.56.43.AM.mov

My sample code:

import React, { useState, useRef } from "react";
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  Alert,
  Platform,
} from "react-native";
import { StatusBar } from "expo-status-bar";
import JWPlayer from "@jwplayer/jwplayer-react-native";
import { getLicenseKey } from "./config";

export default function App() {
  const [isPlayerVisible, setIsPlayerVisible] = useState(false);
  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
  const playerRef = useRef(null);
  const videos = [
    {
      file: "https://content.bitsontherun.com/videos/q1fx20VZ-52qL9xLP.mp4",
      title: "Video 1",
      description: "Video 1",
    },

    {
      file: "https://content.bitsontherun.com/videos/3XnJSIm4-injeKYZS.mp4",
      title: "Video 2",
      description: "Video 2",
    },
  ];

  const playerConfig = {
    license: getLicenseKey(Platform.OS),
    playlist: [videos[0]],
    autostart: true,
    controls: true,
    repeat: false,
    backgroundAudioEnabled: true,
  };

  const showPlayer = () => {
    setIsPlayerVisible(true);
  };

  const switchVideo = () => {
    const nextIndex = (currentVideoIndex + 1) % videos.length;
    setCurrentVideoIndex(nextIndex);
    playerRef.current?.loadPlaylist([videos[nextIndex]]);
  };
  const hidePlayer = () => {
    setIsPlayerVisible(false);
  };

  const onPlayerReady = () => {
    console.log("JWPlayer is ready");
  };

  const onPlayerError = (error) => {
    console.error("JWPlayer error:", error);
    Alert.alert("Player Error", "An error occurred while playing the video");
  };

  const onPlayerComplete = () => {
    console.log("Video playback completed");
  };

  const onAdEvent = (event) => {
    console.log("Ad event:", event.nativeEvent);
  };
  const onAdError = (error) => {
    console.log("Ad error:", error);
  };
  const onPlayerAdError = (error) => {
    console.log("Player ad error:", error);
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="auto" />

      <ScrollView contentContainerStyle={styles.scrollContent}>
        <View style={styles.header}>
          <Text style={styles.title}>Expo JWPlayer Demo</Text>
          <Text style={styles.subtitle}>
            A simple example of JWPlayer integration with Expo
          </Text>
        </View>

        <View style={styles.content}>
          {!isPlayerVisible ? (
            <View style={styles.playerPlaceholder}>
              <Text style={styles.placeholderText}>
                JWPlayer will appear here
              </Text>
              <TouchableOpacity style={styles.button} onPress={showPlayer}>
                <Text style={styles.buttonText}>Load Video Player</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={styles.playerContainer}>
              <JWPlayer
                ref={playerRef}
                config={playerConfig}
                onPlayerReady={onPlayerReady}
                onPlayerError={onPlayerError}
                onPlayerComplete={onPlayerComplete}
                onAdEvent={onAdEvent}
                onAdError={onAdError}
                onPlayerAdError={onPlayerAdError}
                style={styles.player}
              />
              <TouchableOpacity style={styles.hideButton} onPress={switchVideo}>
                <Text style={styles.hideButtonText}>Switch Video</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.hideButton} onPress={hidePlayer}>
                <Text style={styles.hideButtonText}>Hide Player</Text>
              </TouchableOpacity>
            </View>
          )}

          <View style={styles.info}>
            <Text style={styles.infoTitle}>Features:</Text>
            <Text style={styles.infoText}>
              • JWPlayer React Native integration
            </Text>
            <Text style={styles.infoText}>• Video playback controls</Text>
            <Text style={styles.infoText}>• Error handling</Text>
            <Text style={styles.infoText}>• Event callbacks</Text>
            <Text style={styles.infoText}>• Responsive design</Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

[Jmilham21]

@desmondgong-mw I think the issue is that the autostart prop isn't being respected when you call loadPlaylist, so you load it (and the player seems to actually load and buffer it under the hood), but the UI doesn't update until you either interact or call an API.

In your use case, I'd suggest calling .play() when it's ready. See a generated example on how to do this with some verbose logging.

import React, {useState, useRef} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  Platform,
} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Player from '../components/Player';

export default () => {
  const [isPlayerVisible, setIsPlayerVisible] = useState(false);
  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
  const [eventLog, setEventLog] = useState([]);
  const playerRef = useRef(null);
  const waitingForPlaylistItem = useRef(false);
  const insets = useSafeAreaInsets();

  const videos = [
    {
      file: 'https://content.bitsontherun.com/videos/q1fx20VZ-52qL9xLP.mp4',
      title: 'Video 1',
      description: 'Video 1',
    },
    {
      file: 'https://content.bitsontherun.com/videos/3XnJSIm4-injeKYZS.mp4',
      title: 'Video 2',
      description: 'Video 2',
    },
  ];

  const addLog = message => {
    const timestamp = new Date().toLocaleTimeString();
    const logMessage = `[${timestamp}] ${message}`;
    console.log(logMessage);
    setEventLog(prev => [logMessage, ...prev]);
  };

  const showPlayer = () => {
    addLog('🔵 Show Player button pressed');
    setIsPlayerVisible(true);
  };

  const hidePlayer = () => {
    addLog('🔵 Hide Player button pressed');
    setIsPlayerVisible(false);
  };

  const switchVideo = () => {
    const nextIndex = (currentVideoIndex + 1) % videos.length;
    addLog(
      `🔵 Switch Video button pressed - Loading Video ${nextIndex + 1}`,
    );
    setCurrentVideoIndex(nextIndex);
    waitingForPlaylistItem.current = true;
    playerRef.current?.loadPlaylist([videos[nextIndex]]);
    
    // Fallback: Call play() after a delay if onPlaylistItem doesn't fire
    // This helps identify the intermittent bug in issue #183
    setTimeout(() => {
      if (waitingForPlaylistItem.current) {
        addLog('⚠️ onPlaylistItem did NOT fire - calling play() as fallback');
        playerRef.current?.play();
        waitingForPlaylistItem.current = false;
      }
    }, 500);
  };

  const clearLog = () => {
    setEventLog([]);
  };

  const onPlayerReady = () => {
    addLog('✅ onPlayerReady - Player is ready');
  };

  const onPlaylistItem = event => {
    addLog(
      `✅ onPlaylistItem - ${event.nativeEvent.item?.title || 'No title'}`,
    );
    
    // If we were waiting for this event, clear the flag and start playback
    if (waitingForPlaylistItem.current) {
      addLog('✅ onPlaylistItem fired correctly - calling play()');
      waitingForPlaylistItem.current = false;
      playerRef.current?.play();
    }
  };

  const onPlay = () => {
    addLog('✅ onPlay - Video started playing');
  };

  const onPause = () => {
    addLog('⏸️ onPause - Video paused');
  };

  const onBuffer = () => {
    addLog('⏳ onBuffer - Video buffering');
  };

  const onPlayerError = error => {
    addLog(`❌ onPlayerError - ${error.nativeEvent?.error || 'Unknown error'}`);
  };

  const onComplete = () => {
    addLog('🏁 onComplete - Video playback completed');
  };

  const playerConfig = {
    playlist: [videos[currentVideoIndex]],
    autostart: true,
    controls: true,
    repeat: false,
  };

  return (
    <View
      style={[
        styles.container,
        Platform.OS === 'android' && {paddingBottom: insets.bottom},
      ]}>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}>
        {/* Player Section */}
        <View style={styles.playerSection}>
          {!isPlayerVisible ? (
            <View style={styles.playerPlaceholder}>
              <Text style={styles.placeholderText}>
                Player will appear here
              </Text>
              <TouchableOpacity style={styles.button} onPress={showPlayer}>
                <Text style={styles.buttonText}>Show Player</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={styles.playerContainer}>
              <Player
                ref={playerRef}
                config={playerConfig}
                style={styles.player}
                onPlayerReady={onPlayerReady}
                onPlaylistItem={onPlaylistItem}
                onPlay={onPlay}
                onPause={onPause}
                onBuffer={onBuffer}
                onPlayerError={onPlayerError}
                onComplete={onComplete}
              />
            </View>
          )}
        </View>

        {/* Controls Section */}
        {isPlayerVisible && (
          <View style={styles.controlsSection}>
            <TouchableOpacity style={styles.button} onPress={switchVideo}>
              <Text style={styles.buttonText}>
                Switch to Video {((currentVideoIndex + 1) % videos.length) + 1}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.button, styles.dangerButton]}
              onPress={hidePlayer}>
              <Text style={styles.buttonText}>Hide Player</Text>
            </TouchableOpacity>
          </View>
        )}

        {/* Info Section */}
        <View style={styles.infoSection}>
          <Text style={styles.infoTitle}>Testing loadPlaylist():</Text>
          <Text style={styles.infoText}>
            • Show player and observe onPlayerReady/onPlaylistItem events
          </Text>
          <Text style={styles.infoText}>
            • Switch between videos using loadPlaylist()
          </Text>
          <Text style={styles.infoText}>
            • Check event log for missing events (issue #183)
          </Text>
        </View>

        {/* Event Log Section */}
        <View style={styles.logSection}>
          <View style={styles.logHeader}>
            <Text style={styles.logTitle}>Event Log</Text>
            <TouchableOpacity onPress={clearLog}>
              <Text style={styles.clearButton}>Clear</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.logContainer}>
            {eventLog.length === 0 ? (
              <Text style={styles.logEmpty}>No events yet...</Text>
            ) : (
              eventLog.map((log, index) => (
                <Text key={index} style={styles.logEntry}>
                  {log}
                </Text>
              ))
            )}
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 20,
  },
  playerSection: {
    backgroundColor: 'black',
  },
  playerPlaceholder: {
    height: 250,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1a1a1a',
  },
  placeholderText: {
    color: '#888',
    fontSize: 16,
    marginBottom: 20,
  },
  playerContainer: {
    height: 250,
  },
  player: {
    flex: 1,
  },
  controlsSection: {
    padding: 15,
    gap: 10,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  dangerButton: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  infoSection: {
    padding: 15,
    backgroundColor: 'white',
    marginHorizontal: 15,
    marginTop: 15,
    borderRadius: 8,
  },
  infoTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  infoText: {
    fontSize: 14,
    color: '#666',
    marginBottom: 5,
    paddingLeft: 5,
  },
  logSection: {
    margin: 15,
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 15,
  },
  logHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  logTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
  clearButton: {
    color: '#007AFF',
    fontSize: 14,
    fontWeight: '600',
  },
  logContainer: {
    backgroundColor: '#f9f9f9',
    borderRadius: 4,
    padding: 10,
    maxHeight: 300,
  },
  logEmpty: {
    color: '#999',
    fontStyle: 'italic',
    textAlign: 'center',
    padding: 20,
  },
  logEntry: {
    fontSize: 12,
    color: '#333',
    marginBottom: 5,
    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
  },
});

[desmondgong-mw]

@Jmilham21 Thanks for the quick reply! The workaround using .play() works, but it causes the app to crash when switching videos rapidly.

Screen.Recording.2025-11-05.at.2.41.42.PM.mov

The error I got:

[CoreFoundation] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[AVPlayerItem addOutput:] Cannot attach an output that is already attached or nil output'
*** First throw call stack:
(
0   CoreFoundation                      0x00000001804c9690 __exceptionPreprocess + 172
1   libobjc.A.dylib                     0x00000001800937cc objc_exception_throw + 72
2   AVFCore                             0x00000001d78e2310 -[AVPlayerItem(AVPlayerItemOutputs) addOutput:] + 512
3   JWPlayerKit                         0x0000000104b3a82c __swift_memcpy138_8 + 4732
4   JWPlayerKit                         0x0000000104aa5b1c block_destroy_helper.36 + 184
5   libdispatch.dylib                   0x000000018017c788 _dispatch_call_block_and_release + 24
6   libdispatch.dylib                   0x0000000180197278 _dispatch_client_callout + 12
7   libdispatch.dylib                   0x0000000180185ad0 _dispatch_lane_serial_drain + 984
8   libdispatch.dylib                   0x000000018018659<…>

[Jmilham21]

I'm seeing the same @desmondgong-mw. We have a report of this internally too and are looking into a fix. It seems this may be blocked until we can resolve the native SDK issue.