I can't get expo av to connect with react native media controls

[julioceno]

Please provide the following:

1. SDK Version:
2. Platforms(Android/iOS/web/all):

I would like help connecting the expo video with the react native media controls, I’ve tried several ways but none of them works, I’ll be grateful if someone helps me, I’ve been trying for days.

import React, { useState, useRef } from ‘react’;
import { StyleSheet, View, Text, Platform } from ‘react-native’;
import MediaControls, { PLAYER_STATES } from ‘react-native-media-controls’;
import { Video } from ‘expo-av’;
// import Video from ‘react-native-video’;

export default function VideoPlayer() {

const video = require('../video.mp4');

const videoPlayer = useRef(null);
const [duration, setDuration] = useState(0);
const [paused, setPaused] = useState(true);
const [currentTime, setCurrentTime] = useState(0);
const [playerState, setPlayerState] = useState(PLAYER_STATES.PAUSED);
const [isLoading, setIsLoading] = useState(true);


const onSeek = (seek) => {
    videoPlayer?.current.seek(seek);
};

const onSeeking = (currentVideoTime) => setCurrentTime(currentVideoTime);

const onPaused = (newState) => {
    setPaused(!paused);
    setPlayerState(newState);
};

const onReplay = () => {
    videoPlayer?.current.seek(0);
    setCurrentTime(0);
    if (Platform.OS === 'android') {
        setPlayerState(PLAYER_STATES.PAUSED);
        setPaused(true);
    } else {
        setPlayerState(PLAYER_STATES.PLAYING);
        setPaused(false);
    }
};

const onProgress = (data) => {
    if (!isLoading) {
        setCurrentTime(data.currentTime);
    }
};

const onLoad = (data) => {
    setDuration(Math.round(data.duration));
    setIsLoading(false);
};

const onLoadStart = () => setIsLoading(true);

const onEnd = () => {
    setPlayerState(PLAYER_STATES.ENDED);
    setCurrentTime(duration);
};

return (
    <View>

        <Video
            resizeMode={'cover'}
            source={video}
            style={styles.backgroundVideo}
            ref={videoPlayer}

            positionMillis={currentTime}
            onLoad={isLoading}
            progressUpdateIntervalMillis={currentTime}
            
        />


        <MediaControls
            isFullScreen={false}
            duration={duration}
            isLoading={isLoading}
            progress={currentTime}
            onPaused={onPaused}
            onReplay={onReplay}
            onSeek={onSeek}
            onSeeking={onSeeking}
            mainColor={"#8883"}
            playerState={playerState}
            sliderStyle={{ containerStyle: {}, thumbStyle: {}, trackStyle: {} }}
        />
    </View>

);

};

const styles = StyleSheet.create({
backgroundVideo: {
width: 400,
height: 300,

}

});