v1.1.0 works in one repo but not works in other repo

[jsunwoo]

Hi,

Thank you in advance for the great package.

I made two repositories with different versions of react-native.
[email protected] works well in one repository but not works in another repository.

This is index.js file

/**
 * @format
 */

import { AppRegistry } from "react-native";
import App from "./AppYoutube";
import { name as appName } from "./app.json";

AppRegistry.registerComponent(appName, () => App);

AppYoutube is like this.

import React from "react";
import {
  StyleSheet,
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  PixelRatio,
  Dimensions,
  Platform
} from "react-native";
import YouTube, {
  YouTubeStandaloneIOS,
  YouTubeStandaloneAndroid
} from "react-native-youtube";
// import Voice from "react-native-voice";

export default class RCTYouTubeExample extends React.Component {
  state = {
    isReady: false,
    status: null,
    quality: null,
    error: null,
    isPlaying: true,
    isLooping: true,
    duration: 0,
    currentTime: 0,
    fullscreen: false,
    containerMounted: false,
    containerWidth: null
  };

  onStart = () => {
    Voice.start("en-US");
  };

  onEnd = () => {
    Voice.stop();
  };

  render() {
    return (
      <ScrollView
        style={styles.container}
        onLayout={({
          nativeEvent: {
            layout: { width }
          }
        }) => {
          if (!this.state.containerMounted)
            this.setState({ containerMounted: true });
          if (this.state.containerWidth !== width)
            this.setState({ containerWidth: width });
        }}
      >
        <Text style={styles.welcome}>
          {"<YouTube /> component for\n React Native."}
        </Text>
        <Text style={styles.instructions}>
          http://github.com/inProgress-team/react-native-youtube
        </Text>

        {this.state.containerMounted && (
          <YouTube
            ref={component => {
              this._youTubeRef = component;
            }}
            // You must have an API Key for the player to load in Android
            // apiKey="AIzaSyA7cqA4gnv-GozcYRjW2M3Kz1AveTi7F1A"
            // Un-comment one of videoId / videoIds / playlist.
            // You can also edit these props while Hot-Loading in development mode to see how
            // it affects the loaded native module
            videoId="KVZ-P-ZI6W4"
            // videoIds={['HcXNPI-IPPM', 'XXlZfc1TrD0', 'czcjU1w-c6k', 'uMK0prafzw0']}
            // playlistId="PLF797E961509B4EB5"
            play={this.state.isPlaying}
            loop={this.state.isLooping}
            fullscreen={this.state.fullscreen}
            controls={1}
            style={[
              {
                height: PixelRatio.roundToNearestPixel(
                  this.state.containerWidth / (16 / 9)
                )
              },
              styles.player
            ]}
            onError={e => this.setState({ error: e.error })}
            onReady={e => this.setState({ isReady: true })}
            onChangeState={e => this.setState({ status: e.state })}
            onChangeQuality={e => this.setState({ quality: e.quality })}
            onChangeFullscreen={e =>
              this.setState({ fullscreen: e.isFullscreen })
            }
            onProgress={e =>
              this.setState({
                duration: e.duration,
                currentTime: e.currentTime
              })
            }
          />
        )}

        {/* Playing / Looping */}
        <View style={styles.buttonGroup}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.setState(s => ({ isPlaying: !s.isPlaying }))}
          >
            <Text style={styles.buttonText}>
              {this.state.status == "playing" ? "Pause" : "Play"}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this.setState(s => ({ isLooping: !s.isLooping }))}
          >
            <Text style={styles.buttonText}>
              {this.state.isLooping ? "Looping" : "Not Looping"}
            </Text>
          </TouchableOpacity>
        </View>

        {/* Previous / Next video */}
        <View style={styles.buttonGroup}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this._youTubeRef && this._youTubeRef.previousVideo()}
          >
            <Text style={styles.buttonText}>Previous Video</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this._youTubeRef && this._youTubeRef.nextVideo()}
          >
            <Text style={styles.buttonText}>Next Video</Text>
          </TouchableOpacity>
        </View>

        {/* Go To Specific time in played video with seekTo() */}
        <View style={styles.buttonGroup}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this._youTubeRef && this._youTubeRef.seekTo(15)}
          >
            <Text style={styles.buttonText}>15 Seconds</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this._youTubeRef && this._youTubeRef.seekTo(2 * 60)}
          >
            <Text style={styles.buttonText}>2 Minutes</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => this._youTubeRef && this._youTubeRef.seekTo(15 * 60)}
          >
            <Text style={styles.buttonText}>15 Minutes</Text>
          </TouchableOpacity>
        </View>

        {/* Play specific video in a videoIds array by index */}
        {this._youTubeRef &&
          this._youTubeRef.props.videoIds &&
          Array.isArray(this._youTubeRef.props.videoIds) && (
            <View style={styles.buttonGroup}>
              {this._youTubeRef.props.videoIds.map((videoId, i) => (
                <TouchableOpacity
                  key={i}
                  style={styles.button}
                  onPress={() =>
                    this._youTubeRef && this._youTubeRef.playVideoAt(i)
                  }
                >
                  <Text
                    style={[styles.buttonText, styles.buttonTextSmall]}
                  >{`Video ${i}`}</Text>
                </TouchableOpacity>
              ))}
            </View>
          )}

        {/* Get current played video's position index when playing videoIds (and playlist in iOS) */}
        <View style={styles.buttonGroup}>
          <TouchableOpacity
            style={styles.button}
            onPress={() =>
              this._youTubeRef &&
              this._youTubeRef
                .videosIndex()
                .then(index => this.setState({ videosIndex: index }))
                .catch(errorMessage => this.setState({ error: errorMessage }))
            }
          >
            <Text style={styles.buttonText}>
              Get Videos Index: {this.state.videosIndex}
            </Text>
          </TouchableOpacity>
        </View>

        {/* Fullscreen */}
        {!this.state.fullscreen && (
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={styles.button}
              onPress={() => this.setState({ fullscreen: true })}
            >
              <Text style={styles.buttonText}>Set Fullscreen</Text>
            </TouchableOpacity>
          </View>
        )}

        {/* Update Progress & Duration (Android) */}
        {Platform.OS === "android" && (
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={styles.button}
              onPress={() =>
                this._youTubeRef
                  ? this._youTubeRef
                      .currentTime()
                      .then(currentTime => this.setState({ currentTime }))
                      .catch(errorMessage =>
                        this.setState({ error: errorMessage })
                      )
                  : this._youTubeRef
                      .duration()
                      .then(duration => this.setState({ duration }))
                      .catch(errorMessage =>
                        this.setState({ error: errorMessage })
                      )
              }
            >
              <Text style={styles.buttonText}>
                Update Progress & Duration (Android)
              </Text>
            </TouchableOpacity>
          </View>
        )}

        {/* Standalone Player (iOS) */}
        {Platform.OS === "ios" && YouTubeStandaloneIOS && (
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={styles.button}
              onPress={() =>
                YouTubeStandaloneIOS.playVideo("KVZ-P-ZI6W4")
                  .then(() => console.log("iOS Standalone Player Finished"))
                  .catch(errorMessage => this.setState({ error: errorMessage }))
              }
            >
              <Text style={styles.buttonText}>Launch Standalone Player</Text>
            </TouchableOpacity>
          </View>
        )}

        {/* Standalone Player (Android) */}
        {Platform.OS === "android" && YouTubeStandaloneAndroid && (
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={styles.button}
              onPress={() =>
                YouTubeStandaloneAndroid.playVideo({
                  apiKey: "YOUR_API_KEY",
                  videoId: "KVZ-P-ZI6W4",
                  autoplay: true,
                  lightboxMode: false,
                  startTime: 124.5
                })
                  .then(() => console.log("Android Standalone Player Finished"))
                  .catch(errorMessage => this.setState({ error: errorMessage }))
              }
            >
              <Text style={styles.buttonText}>Standalone: One Video</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={() =>
                YouTubeStandaloneAndroid.playVideos({
                  apiKey: "YOUR_API_KEY",
                  videoIds: [
                    "HcXNPI-IPPM",
                    "XXlZfc1TrD0",
                    "czcjU1w-c6k",
                    "uMK0prafzw0"
                  ],
                  autoplay: false,
                  lightboxMode: true,
                  startIndex: 1,
                  startTime: 99.5
                })
                  .then(() => console.log("Android Standalone Player Finished"))
                  .catch(errorMessage => this.setState({ error: errorMessage }))
              }
            >
              <Text style={styles.buttonText}>Videos</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.button}
              onPress={() =>
                YouTubeStandaloneAndroid.playPlaylist({
                  apiKey: "YOUR_API_KEY",
                  playlistId: "PLF797E961509B4EB5",
                  autoplay: false,
                  lightboxMode: false,
                  startIndex: 2,
                  startTime: 100.5
                })
                  .then(() => console.log("Android Standalone Player Finished"))
                  .catch(errorMessage => this.setState({ error: errorMessage }))
              }
            >
              <Text style={styles.buttonText}>Playlist</Text>
            </TouchableOpacity>
          </View>
        )}

        {/* Reload iFrame for updated props (Only needed for iOS) */}
        {Platform.OS === "ios" && (
          <View style={styles.buttonGroup}>
            <TouchableOpacity
              style={styles.button}
              onPress={() =>
                this._youTubeRef && this._youTubeRef.reloadIframe()
              }
            >
              <Text style={styles.buttonText}>Reload iFrame (iOS)</Text>
            </TouchableOpacity>
          </View>
        )}

        <Text style={styles.instructions}>
          {this.state.isReady ? "Player is ready" : "Player setting up..."}
        </Text>
        <Text style={styles.instructions}>Status: {this.state.status}</Text>
        <Text style={styles.instructions}>Quality: {this.state.quality}</Text>

        {/* Show Progress */}
        <Text style={styles.instructions}>
          Progress: {Math.trunc(this.state.currentTime)}s (
          {Math.trunc(this.state.duration / 60)}:
          {Math.trunc(this.state.duration % 60)}s)
          {Platform.OS !== "ios" && (
            <Text> (Click Update Progress & Duration)</Text>
          )}
        </Text>

        <Text style={styles.instructions}>
          {this.state.error ? "Error: " + this.state.error : ""}
        </Text>
        <View style={styles.buttons}>
          <TouchableOpacity onPress={this.onStart} style={styles.buttonStyle}>
            <Text>시작</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.onEnd} style={styles.buttonStyle}>
            <Text>끝</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={this.onAvailable}
            style={styles.buttonStyle}
          >
            <Text>isAvailable</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.onCancel} style={styles.buttonStyle}>
            <Text>cancel</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.onDestroy} style={styles.buttonStyle}>
            <Text>destroy</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  buttons: {
    flexDirection: "row",
    justifyContent: "space-between"
  },
  container: {
    backgroundColor: "white"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  buttonGroup: {
    flexDirection: "row",
    alignSelf: "center"
  },
  button: {
    paddingVertical: 4,
    paddingHorizontal: 8,
    alignSelf: "center"
  },
  buttonText: {
    fontSize: 18,
    color: "blue"
  },
  buttonTextSmall: {
    fontSize: 15
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  },
  player: {
    alignSelf: "stretch",
    marginVertical: 10
  }
});

This repository is working well(package.json).

{
  "name": "video",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-native-gifted-chat": "^0.9.4",
    "react-native-progress": "^3.6.0",
    "react-native-vector-icons": "^6.5.0",
    "react-native-video": "^4.4.1",
    "react-native-voice": "^0.3.0",
    "react-native-youtube": "^1.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/runtime": "^7.4.5",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

This repository is not working

{
  "name": "scene",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "ios": "react-native run-ios",
    "ios6": "react-native run-ios --simulator='iPhone 6'",
    "ios8+": "react-native run-ios --simulator='iPhone 8 Plus'"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "firebase": "^7.6.1",
    "react": "16.8.3",
    "react-native": "0.59.4",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-modal": "^11.5.3",
    "react-native-on-layout": "^2.0.2",
    "react-native-swiper": "^1.5.14",
    "react-native-vector-icons": "6.4.2",
    "react-native-youtube": "1.1.0",
    "react-navigation": "3.8.1",
    "styled-components": "^4.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/runtime": "^7.7.7",
    "babel-jest": "^24.9.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

I'm trying to migrate react-native-youtube dependency to the not working repository(0.59.4).
There is no error or warning, but the video screen is just keeping the white screen.

What am I missing now?

Any help would be appreciated.

When package is working seems like left one, otherwise looks like right screenshot.

Also, I tried to upgrade react-native version to 59.9, still not working :(

[davidohayon669]

@jsunwoo why not version 2? It is working with newer versions of react-native
version 1.x.x isn't guaranteed to be working with them

[jsunwoo]

@davidohayon669
Yeah, I adapted version 2 to my new project.
Thanks for your reply :)