LonelyCpp / react-native-youtube-iframe

A wrapper of the Youtube-iframe API built for react native.
https://lonelycpp.github.io/react-native-youtube-iframe/
MIT License
612 stars 155 forks source link

React native FlatList last gallery item disappers after Youtube full screen #316

Open ihorkolucky opened 1 year ago

ihorkolucky commented 1 year ago

Description

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 <FlatList data={productImages} renderItem={renderItem} keyExtractor={item => item.value_id.toString()} horizontal snapToInterval={400} decelerationRate="fast" />



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][1]][1]

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!

  [1]: https://i.stack.imgur.com/yc5Hk.png

### React Native Version

0.72.3

### Output of `npx react-native info`

info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.22621
  CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  Memory: 541.76 MB / 15.69 GB
Binaries:
  Node:
    version: 16.17.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 8.15.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-213.7172.25.2113.9123335
  Visual Studio:
    - 17.4.33205.214 (Visual Studio Community 2022)
Languages:
  Java: 1.8.0_372
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.3
    wanted: 0.72.3
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.72.5 is now available (your project is running on v0.72.3).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.72.5
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.72.3
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows&platform=android".

### Steps to reproduce

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.

### Snack, screenshot, or link to a repository

![image](https://github.com/facebook/react-native/assets/5212279/e6911f8f-809b-4c30-913c-a83f624f0939)