React-native-youtube: player don't show controls

[ishita-kothari]

Hello,

I have update your package to "react-native-youtube": "^1.0.0-alpha.6". I am able to play the video at times but few times controls are not shown on android device and hence unable to play video. Also when I build my app, I am not able to play video. Controls are not displayed in released app.

code is:

ref={(component) => {
this._youTubeRef = component;
}}

                apiKey="api-key"
                videoId="video-id"
                play={this.state.isPlaying}
                loop={this.state.isLooping}
                fullscreen={this.state.fullscreen}
                controls={1}
                style={styles.player}
                onError={e => console.log( 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={Platform.OS === 'ios'
        ? e => this.setState({ duration: e.duration, currentTime: e.currentTime })
        : undefined}
            />
        </ScrollView>

on each button click a new video will open on new page.

Please guide me.

Thanks!

[davidohayon669]

131

[ishita-kothari]

I am still not able to run the video with controls. Can anyone give me proper solution?

[davidohayon669]

@ishita-kothari there is a reason #131 is labeled with "bug"

[wack17s]

@ishita-kothari
this hack works for me

export default class extends Component {
    state = {
        height: 215
    }

    handleReady = () => {
        setTimeout(() => this.setState({ height: 216 }), 200);
    }

    render() {
        return (
            <YouTube
                apiKey   = {config.YOUTUBE_API_KEY}
                ref      = {item => this.player = item}
                videoId  = {getVideoId(uri)}
                controls = {1}
                onReady  = {this.handleReady}
                style    = {{ alignSelf: 'stretch', height: height }}
            />
        );
    }
}

[ishita-kothari]

@wack17s thank you. Seems this hack worked.