React Native: Switch/(Un)Hide Components - Conditional

First time doing React Native. I am trying to switch the components by statement if const video = undefined/null. So if someone can give a hand about that, please. Thank you.

I would like to

• if 'video' obj is undefined/null then to - hide className="Video"(the WebView component) and hide "gallerySecond" and show "galleryFirst"

• if there's data at the video obj: then would like to hide "galleryFirst" and show gallerySecond and show the video (WebView component)

  export const video = 'DyDfgMOUjCI';
  

            <WebView
              style={{ width: 360, height: 250 }}
              javaScriptEnabled={true}
              className="Video"
              domStorageEnabled={true}
              source={{ uri: "https://www.youtube.com/embed/"+{video}}}
            />
          </View>
  
          <Gallery className="galleryFirst" style={{position: "relative", flexDirection: "row" }}/>
  
          <View style={styles.description}>
              <Text style={styles.descriptiontext}>
                  Some Text
              </Text>
          </View>
  
          <Gallery className="gallerySecond" style={{position: "relative", flexDirection: "row" }}/>
  

    {video?<WebView
        style={{ width: 360, height: 250 }}
        javaScriptEnabled={true}
        className="Video"
        domStorageEnabled={true}
        source={{ uri: "https://www.youtube.com/embed/"+{video}}}
      />:null}
    </View>

    {!video?<Gallery className="galleryFirst" style={{position: "relative", flexDirection: "row" }}/>:null}

    <View style={styles.description}>
        <Text style={styles.descriptiontext}>
            Some Text
        </Text>
    </View>

    {video?<Gallery className="gallerySecond" style={{position: "relative", flexDirection: "row" }}/>:null}