React Native Video throwing "Render Error - Objects are not valid as a react child" while using style

Viewed 209

I am getting this error:

Objects are not valid as a React child (found: object with keys {position, top, left, bottom, right}). If you meant to render a collection of children, use an array instead.

I am simply trying to play video

import React from 'react';
import {
    View, Text, StyleSheet, Dimensions
} from 'react-native';

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


const Post = () => {
    const videoURL = 'https://d8vywknz0hvjw.cloudfront.net/fitenium-media-prod/videos/45fee890-a74f-11ea-8725-311975ea9616/processed_720.mp4'
    return (
        <View >
            <Video source={{ uri: videoURL }}>
                style={styles.backgroundVideo}
                {/* onError={(e) => console.log(e)} */}
                {/* resizeMode={'cover'} */}
            </Video>
        </View>
    );
};

var styles = StyleSheet.create({
    backgroundVideo: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
});


export default Post;

This is the same as the example in React Native Video Github What am I missing?

1 Answers

I think style should be inside video component, like this:

 <Video source={{ uri: videoURL }} 
                style={styles.backgroundVideo}
                {/* onError={(e) => console.log(e)} */}
                {/* resizeMode={'cover'} */}>
</Video>
Related