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

Question

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',
            }
        ]
        
    },
    ......

Moistbobo · Accepted Answer · 2021-03-16 04:49:16Z

1

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 }}

answered Mar 16, 2021 at 4:49

Moistbobo

3,0721 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Benjamin Ikwuagwu Over a year ago

I've done exactly what you said before - source={{ uri: userAvarter.videoAvarter.videoUri }}, yet I still got the same error "Trying to load empty source"

Moistbobo Over a year ago

Ah, it seems that the videoAvarter is an array, so the source should be source={{ uri: userAvarter.videoAvarter[0].videoUri }}

Benjamin Ikwuagwu Over a year ago

Thank you @Moistbobo, the error disappeared, but now my video screen is just showing blank, I've tried all I could for hours but could not resolve it. I don't know if I should ask a fresh question about this.`

R.singh Over a year ago

@BenjaminIkwuagwu did u found any solution?

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related