CODEWITHSUNDEEP
javascripthtmlreactjsreact-nativereact-hooks
Benjamin Ikwuagwu
Benjamin Ikwuagwu

Reputation: 459

How to solved error - Trying to load empty source in react native video

I tried to use video as profile avarter so that when the profile avarter is pressed, it will play the video in in another screen. But I have tried to play the video it keeps t giving me a warniing "Trying to load empty source". Please what am I missing?

Here's my code on videoAvarterScreen.js:

...
import vidData from '../../../data/data';
import Video from 'react-native-video';
import styles from './styles';

const VideoAvarterScreen = () => {


    const route = useRoute();

    const userId = route.params.userId;

    const userAvarter = vidData.find(vidAvarter => vidAvarter.user.id === userId);

    console.log("userAvarter");
    console.log(userAvarter);

    

    const [paused, setPaused] = useState(true);

    const onPlayPausePress = () => {
        setPaused(!paused);
    }

    return(
        <SafeAreaView style={styles.container}>
            <TouchableOpacity onPress={onPlayPausePress}>
                <Video 
                    source={{ uri: vidData.videoUri }}
                    style={styles.videoAvarter}
                    resizeMode={'cover'}
                    repeat={true}
                    paused={paused}
                />
            </TouchableOpacity>
            
        </SafeAreaView>
    );  
}
    
export default VideoAvarterScreen;

And here's my data.js:

export default [
    {
        id: '1',
        user: {
            imageUri: 'https://media-exp1.licdn.com/dms/image/C4D03AQEh5M1sg1G5VA/profile-displayphoto-shrink_800_800/0/1516536139756?e=1613606400&v=beta&t=xKHlgicMaGaMAxW_L6f83Tvt3o-tbDGbUjtzyYRf9Qk',
            name: 'Shawacademy',
            username: '@shawacademy',
            gender: 'female',
            bio: `I'm an entrepreneur, and \nambitous business woman.`
        },

        videoAvarter: [
            {
                videoUri: 'https://www.w3schools.com/html/mov_bbb.mp4',
                postedAt: '30 minutes ago',
                locatedAt: 'Kuwait, Kuwait',
            }
        ]
        
    },
    ......

Upvotes: 4

Views: 4926

Answers (1)

Moistbobo
Moistbobo

Reputation: 2962

Your Video component is using the original vidData array instead of the userAvarter value.

So try changing source={{ uri: vidData.videoUri }} to source={{ uri: userAvarter.videoAvarter.videoUri }}

Upvotes: 1

Related Questions