0

I'm using react-native-ytdl and react-native-video

I get youtube play link from "react-native-ytdl" and I play from "react-native-video"

but "react-native-ytdl' is using async When the component is loaded, the first testvalue comes out as undefined, enter image description here

and when the async is complete, the link is re-rendered. enter image description here

ytdl code

componentDidMount(){
            
            const {route, navigation} = this.props; 
            const {gameVid} = route.params;
            
            
                const rendertest = async (gameVid) => {

        
                    const format = await ytdl(gameVid, { quality: '22'});
                    let test = JSON.stringify(format[0].url);
                        
                    return test
                    
                }
            
             
                    rendertest(gameVid).then(finalValue => {
                        console.log(typeof(finalValue)+": "+finalValue)
                        //this.state.testvalue = finalValue;
                        this.setState({
                            testvalue: finalValue,
                            
                        });
                       
                        
                    })
    
            
            
            
        }

react-native-video code

<Video source={{uri: this.state.testvalue}}
                            
                            
                            resizeMode = "cover"
                            isNetwork = {this.state.done}

                            style={{width: '100%', height: 250,
                                position:'absolute',
                                
                            }}
                            
        
        
                    />

It seems that the video does not play normally because it is initially undefined

How can I get the link to be loaded before the component is rendered..?

munhyok
  • 5
  • 3

1 Answers1

1

You can conditionally render the Video component. That way, the Video component will render if this.state.testvalue is truthy

{this.state.testvalue ? (
    <Video
        source={{uri: this.state.testvalue}}
        resizeMode="cover"
        isNetwork={this.state.done}
        style={{width: '100%', height: 250, position:'absolute'}}
    />
) : null}
Ugur Eren
  • 1,968
  • 2
  • 11
  • 21
  • It still doesn't work. In my opinion, as the component is rendered, the undefined testvalue is inserted into the conditional and output as null. – munhyok Jul 05 '21 at 12:13
  • As a result of testing by replacing null with console.log("failed") , failed is output to the console. – munhyok Jul 05 '21 at 12:13
  • It logs failed but it is expected, we want that. When your page renders, our ternary block checks if this.state.testvalue is set, but it is not set in first render, it is undefined, so it returns null. there is no problem with that. when you update your state in componentdidmount, component re-renders and check for this.state.testvalue again, but this time it is not undefined, it is set, so it renders the video component. In short words, if this solution doesn't work, then the problem is not with the initial value, but the value itself. Check manually if the playback url works.. – Ugur Eren Jul 05 '21 at 12:59
  • When I insert the link directly into the uri, it works fine. I don't know why it doesn't work like that... – munhyok Jul 08 '21 at 08:10
  • @munhyok can you check for testvalue on render? `render(){ console.log("testvalue: ", this.state.testvalue); return (` does it log as undefined and then playback url? – Ugur Eren Jul 09 '21 at 22:56
  • 1
    I found out yesterday that there is something wrong with my code. let test = JSON.stringify(format[0].url); When I subtracted JSON.stringify from , it worked fine. It seems to be a problem because I received it as a JSON String instead of just a String. Thank you very much for your help. – munhyok Jul 10 '21 at 15:15