React native FlatList last gallery item disappers after Youtube full screen

30 Views Asked by At

I have image/youtube video gallery in FlatList component. My code is sipmle:

import { FlatList } from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';


const productImages = [
{
  "value_id": 3839714,
  "medium_image": "https://www.w3schools.com/html/pic_trulli.jpg",
  "media_type": "external-video",
  "video_url": "https://www.youtube.com/watch?v=LqctAnNZMgI"
},    
{
  "value_id": 1884,
  "medium_image": "https://www.w3schools.com/html/pic_trulli.jpg",
  "media_type": "image",
  "video_url": null
},
{
  "value_id": 1885,
  "medium_image": "https://www.w3schools.com/html/img_chania.jpg",
  "media_type": "image",
  "video_url": null
},
{
  "value_id": 3839711,
  "medium_image": "https://www.w3schools.com/html/img_girl.jpg",
  "media_type": "external-video",
  "video_url": "https://www.youtube.com/watch?v=LqctAnNZMgI"
}];

  const renderItem = ({ item, index }:any) => {
      
    if (item.media_type == "external-video") {

      const videoId = item.video_url?.replace("https://www.youtube.com/watch?v=", "");

      return (
          <View key={index}>
            <YoutubePlayer
                height={270}
                width={400}
                videoId={videoId}
                webViewStyle={{marginTop: 30, marginRight: 15}}
            />
          </View>
      )
    } 

    return (
      <View key={index}>
        <Image resizeMode="contain" resizeMethod='resize' style={{margin: 5, width: 400, height: 300}} source={{ uri: item.medium_image }} />
      </View>
    )
  };

main component return:

  return <View>
    <FlatList
      data={productImages}
      renderItem={renderItem}
      keyExtractor={item => item.value_id.toString()}
      horizontal
      snapToInterval={400}
      decelerationRate="fast"
    />
  </View>

Gallery shows ok, but when you:

  1. Scroll to the last video
  2. Rotate screen to landscape (horizontal) orientation
  3. Click Full screen [] button on youtube player
  4. Exit from Full screen mode.

Last video disappers from the gallery, there is just empty space.

enter image description here

It works ok if keep phone in portrait mode only.

Tried to set up multiple options for controls but no one works.

Appreciate any help!

0

There are 0 best solutions below