Ошибка React-Native при добавлении видео с использованием Expo в App.js для фона

Это сообщение об ошибке:

Ошибка: Неизменяемое нарушение: недопустимый тип элемента: ожидается строка (для встроенные компоненты) или класс / функция (для составных компоненты) но получил: объект.

Check the render method of `App`.

This error is located at:
in RCTView (at View.js:60)
in View (at App.js:31)
in RCTView (at View.js:60)
in View (at App.js:30)

Я добавил видео с Expo в свой App.js, получаю эту ошибку и не могу ее решить. Я пытаюсь установить фон для видео, которое я сохранил в папке с ресурсами и на рабочем столе.

App.js

import React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import Video from 'expo';
import { MaterialIcons, Octicons } from '@expo/vector-icons';


export default class App extends React.Component {
    state = {
        mute: false,
        fullScreen: false,
        shouldPlay: true,
    }

handlePlayAndPause = () => {
    this.setState(prevState => ({
        shouldPlay: !prevState.shouldPlay
    }));
}

handleVolume = () => {
    this.setState(prevState => ({
        mute: !prevState.mute,
    }));
}

 render() {
    const { width } = Dimensions.get('window');
    
return (
  <View style = {styles.container}>
            <View>
                    <Text style = {{ textAlign: 'center' }}> React Native Video </Text>
                    <Video
                        source = {{ uri: './assets/background.mp4' }}
                        shouldPlay = {this.state.shouldPlay}
                        resizeMode = "cover"
                        style = {{ width, height: 300 }}
                        isMuted = {this.state.mute}
                    />
                    <View style = {styles.controlBar}>
                        <MaterialIcons 
                            name = {this.state.mute ? "volume-mute" : "volume-up"}
                            size = {45} 
                            color = "white" 
                            onPress = {this.handleVolume} 
                        />
                        <MaterialIcons 
                            name = {this.state.shouldPlay ? "pause" : "play-arrow"} 
                            size = {45} 
                            color = "white" 
                            onPress = {this.handlePlayAndPause} 
                        />
                    </View>
                </View>
  </View>
          );
      }
       }



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    },
    controlBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
        height: 45,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    }
    });

package.json
    {
      "name": "empty-project-template",
      "main": "node_modules/expo/AppEntry.js",
      "private": true,
      "scripts": {
      "start": "expo start",
      "android": "expo start --android",
      "ios": "expo start --ios",
      "postinstall": "react-native link",
      "eject": "expo eject"
    },
      "dependencies": {
      "@babel/preset-react": "^7.0.0",
      "@expo/vector-icons": "^6.3.1",
      "expo": "^30.0.1",
      "link": "^0.1.5",
      "react": "16.3.1",
      "react-native": "^0.55.0",
      "react-native-vector-icons": "^5.0.0",
      "react-native-video": "^3.2.1"
    }
  }