Using WebView in react native

Question

I want to use a WebView to display a youtube playlist whenever I click on a image. But I can't manage to display the WebView, only a blank white page. Here is the code :

showBelier(){
   this.setState({ishowing:true});
    return(
       <WebView
       javaScriptEnabled={true}
       domStorageEnabled={true}
       source={{ uri: "https://www.youtube.com/watch?v=WiOKM4SvC5U&list=PLSlVQ0kIy6qx3s6EHtgStY2kzVfXKwuFD" }}
     />
)}

<View style = {{flexDirection: 'row', justifyContent:'space-between', position:'relative'}}>
    <TouchableOpacity onPressIn={() => this.setState({belier: !this.state.belier})} onPress={()=> this.showBelier()}>
       <Image style = {styles.image} source={ this.state.belier === true ? require("../Images/couleurs/icons8-belier-100.png")
            : require("../Images/gris/beliergris.png")}/>
    </TouchableOpacity>
</View>

Thanks in advance !

score 0 · Answer 1 · answered Oct 01 '19 at 13:13

0

If you have a render method like showBelier inside another function of an element it won't be visible. Please include the method inside your render like this:

<View>
    <TouchableOpacity onPress={() => this.setState({belier: !this.state.belier})}}>
    ....
    </TouchableOpacity>
    {this.showBelier()}
</View>

And adjust your method like this:

showBelier(){
   if(this.state.belier) {
     return(
       <WebView
       javaScriptEnabled={true}
       domStorageEnabled={true}
       source={{ uri: "https://www.youtube.com/watch?v=WiOKM4SvC5U&list=PLSlVQ0kIy6qx3s6EHtgStY2kzVfXKwuFD" }}
     />
  )}
}

answered Oct 01 '19 at 13:13

moritzwick

613
1
10
16

It's still not working, besides my images are fading away when I do it that way.. I have 12 images like the one below, all of them are pointing to a WebView which will display a youtube playlist. I just posted one part of the code, but it's the same every time, just the image are changing – Jats1596 Oct 01 '19 at 13:23
@SauceCurry check this article about conditional rendering: https://medium.com/@szholdiyarov/conditional-rendering-in-react-native-286351816db4 – moritzwick Oct 01 '19 at 13:26
Oh so if I understand it well, I need to implements my render function with the image display too ? Inside my showBelier() I will have the ? – Jats1596 Oct 01 '19 at 13:31
no you don't have to if you want your image to be visible all the time – moritzwick Oct 01 '19 at 13:40
@SauceCurry please see expo snack: https://snack.expo.io/@moritzw1/7a4217 or try to send your full code with a snack – moritzwick Oct 02 '19 at 08:32
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/200288/discussion-between-saucecurry-and-moritzw). – Jats1596 Oct 02 '19 at 08:41

Using WebView in react native

1 Answers1