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:
- Scroll to the last video
- Rotate screen to landscape (horizontal) orientation
- Click Full screen [] button on youtube player
- Exit from Full screen mode.
Last video disappers from the gallery, there is just empty space.
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!
