First Video never shows when using videoIds

[ztlfrancis]

A bug when using videoIds to display a customized list of videos

It seems that the player will always ignore the first videoId(video whose index is zero). In my case, it will ignore videoId(uRfjERaKFhs). And there is only the last three videos in the playlist as if the first videoId never existed.

import React, { useState, useEffect,useLayoutEffect, useCallback, useRef } from "react";
import { StyleSheet,Button, Text,ScrollView,Dimensions, View, Alert,TextInput } from "react-native";

import { db } from "../../../Main";
import { moderateScale,scale } from "../../Variables";
import Modal from 'react-native-modal';
import { Rating, AirbnbRating } from 'react-native-elements';

import YouTube from 'react-native-youtube';


const CustomWorkoutVideoScreen = ({  navigation }) => {
  
  const videoList = ["uRfjERaKFhs","gBoKlLW6eCw","j88u_QKgbck","fJ_ZdSNMweE"];
  
  const [playing, setPlaying] = useState(false);
  
  const {width, height} = Dimensions.get('window');
  
  const [isModalVisible, setModalVisible] = useState(false);
  const [comment, setComment] = useState("");
  const playerRef = React.createRef();

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };
  function ratingCompleted(rating) {
    console.log("Rating is: " + rating)
  }
  const onStateChange = (e) => {
    //if (playerRef.current) {
    //  playerRef.current.getVideosIndex().then(index=>{console.log("ggggg: "+index+" , state: "+e.state)}).catch(error => {console.log("sssss: "+ error)});
    //}
    if (e.state === "ended") {
      toggleModal();
    }
  };
  
  return (
 <View>
    <View style={{flex:1}}>
    <YouTube
      // The YouTube video ID
      videoIds={videoList}
      ref={playerRef}
      onChangeState={onStateChange}
      play = {playing}
      fullscreen = {false}
      loop={false}
      style={{ alignSelf: 'stretch', height: 300 }}
    />
  </View>
    <Modal isVisible={isModalVisible} onBackdropPress={toggleModal} avoidKeyboard={true}>
    <View style={styles.content}>
      <Text style={styles.contentTitle}>Congratulations!</Text>
      <Text style={styles.contentTitle}>How do you feel about this video?</Text>
      <AirbnbRating onFinishRating={ratingCompleted} />
      <TextInput
      style={styles.input}
      onChangeText={setComment}
      value={comment}
      multiline
      numberOfLines={4}
      />
      <Button title="Submit" onPress={toggleModal} />
    </View>
  </Modal>
  
  </View>
  );
};
export default CustomWorkoutVideoScreen;

const styles = StyleSheet.create({
  videoTitle: {
    marginTop: scale(11),
    marginLeft: scale(10),
    fontSize: moderateScale(20, 0.4),
    marginBottom: scale(10),
},
  videoDesc: {
    marginTop: 250,
    marginLeft: scale(10),
    marginRight: scale(10),
    fontSize: moderateScale(14),
    
  },
  scrollView: {
    
  },
  moveList: {
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
  moveListButton: {
    marginBottom: 12,
    marginTop: 12
    
  },
  content: {
    backgroundColor: 'white',
    padding: 22,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
  contentTitle: {
    fontSize: 20,
    marginBottom: 12,
  },
  input: {
    height: scale(60),
    margin: scale(12),
    width: scale(250),
    borderWidth: 2,
  },
  chartContainer: {
    flex: 1
  },
});

[stoopkid1]

@ztlfrancis i experienced the same issue. as a work around, i start my video list array as [''] instead of []

ex: const videoList = ["", "uRfjERaKFhs","gBoKlLW6eCw","j88u_QKgbck","fJ_ZdSNMweE"];