ERROR VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead." And this is the component code =>"import React, { useEffect, useRef, useState } from "react";
import { ScrollView, Text, View } from 'react-native';
import { Video, ResizeMode } from 'expo-av';
import { Ionicons } from '@expo/vector-icons'; // Import Expo Icons
import styles from "./VideoStories.style";
import val from "../../data/videos";
export default function VideoStories({ route }) {
const { id } = route.params;
const [content, setContent] = useState(null); // Initialize with null
const video = useRef(null);
const [status, setStatus] = useState({});
const [speed, setSpeed] = useState(1.0); // Default speed is 1.0
const [quality, setQuality] = useState('auto'); // Default quality is 'auto'
useEffect(() => {
const foundContent = val.find((t) => t.id === id);
if (foundContent) {
setContent(foundContent);
console.log(foundContent.srcVideo, "**********");
}
}, [id]); // Trigger the effect when id changes
const changeSpeed = () => {
const newSpeed = speed === 1.0 ? 1.5 : 1.0; // Toggle between 1.0 and 1.5
setSpeed(newSpeed);
video.current.setRateAsync(newSpeed, true);
};
const changeQuality = () => {
const newQuality = quality === 'auto' ? '720p' : 'auto'; // Toggle between 'auto' and '720p'
setQuality(newQuality);
video.current.setPreferredPeakBitRateAsync(newQuality === 'auto' ? null : 1000000); // Set a preferred bitrate for '720p' or null for 'auto'
};
return (
<ScrollView style={styles.container}>
{content && content.srcVideo ? (
<>
<Video
ref={video}
style={styles.video}
source={content.srcVideo}
useNativeControls
resizeMode={ResizeMode.CONTAIN}
isLooping
rate={speed}
onPlaybackStatusUpdate={status => setStatus(() => status)}
/>
<View style={styles.videoContent}>
<View style={styles.controls}>
<Ionicons
style={styles.control}
name={speed === 1.0 ? 'ios-speedometer' : 'ios-speedometer-outline'}
size={24}
color="black"
onPress={changeSpeed}
/>
<Ionicons
style={styles.control}
name={quality === 'auto' ? 'ios-settings' : 'ios-settings-outline'}
size={24}
color="black"
onPress={changeQuality}
/>
</View>
<Text style={styles.videoTitle}>{content.title}</Text>
<Text style={styles.description}>{content.description}</Text>
</View>
</>
) : (
<Text>Loading ....</Text>
)}
</ScrollView>
);
}
". Please help me 🙏🏻🙏🏻🙏🏻
Юзаешь скролл в скролле
можно, пожалуйста, пример 🙏🏻🙏🏻🙏🏻
Обсуждают сегодня