"Unable to Play Cached Videos in React Native Using react-native-video, RNFetchBlob, and FlatList"

Question

When attempting to play cached videos in a React Native application using the react-native-video component and the RNFetchBlob library for caching, I was encountering an issue where the videos are not displaying or being fetched from the cache.

The problem seems to be related to the URI or file path configuration used in the Video component. Despite the videos being cached successfully, they are not rendering in the FlatList as expected.

The workflow followed by me:-

1.The shorts array consist of the videos location

2.I fetched the video from that location which was stored in mux and then saved in the cache by RNFetchBlob.

3.Then I was providing the fileLocation to the Video component by file://${basepath}/{fileLocation} but while rendering it's not displaying

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, FlatList, Text } from 'react-native';
import RNFetchBlob from 'rn-fetch-blob'; // Import rn-fetch-blob
import Video from 'react-native-video';
import { shots as shotsArr } from '../../assets/Data/shots';

const UpdatedShots = () => {
    const [videoUris, setVideoUris] = useState([]);

    const setVideoInCache = async () => {
        const cachedVideoUris = [];
        const shots = shotsArr; // Update with your shots data
        for (let i = 0; i < shots.length; i++) {
            const fileLocation = shots[i].fileLocation;
            const basePath = RNFetchBlob.fs.dirs.CacheDir;
            const url = `https://stream.mux.com/${fileLocation}.m3u8`;
            const response = await RNFetchBlob.config({
                fileCache: true,
                path: `${basePath}/${fileLocation}`,
            }).fetch('GET', url);
            console.log(response.respInfo, 'status');

            if (response.respInfo.status === 200) {
                console.log(`Video ${fileLocation} saved in cache.`);
                cachedVideoUris.push(fileLocation);
            } else {
                console.error(`Failed to save ${fileLocation} in cache.`);
            }
            console.log(
                `file://${RNFetchBlob.fs.dirs.CacheDir}/${fileLocation}`,
            );
        }
        return cachedVideoUris;
    };

    useEffect(() => {
        const fetchData = async () => {
            const videoUris = await setVideoInCache();
            console.log(videoUris, 'cached URIs');
            setVideoUris(videoUris);
        };
        fetchData();
    }, [setVideoUris]);

    const renderItem = ({ item }) => (
        <View style={styles.videoContainer}>
            <Video
                source={{
                    uri: `file://${RNFetchBlob.fs.dirs.CacheDir}/${item}`,
                }}
                style={styles.videoPlayer}
                controls={true}
                resizeMode="contain"
            />
        </View>
    );

    return videoUris.length > 0 ? (
        <View style={styles.container}>
            <FlatList
                data={videoUris}
                renderItem={renderItem}
                keyExtractor={(_, index) => index.toString()}
            />
        </View>
    ) : (
        <View>
            <Text style={{ color: 'black' }}>Loading</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    videoContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 200, // Adjust the height as needed
        marginVertical: 10,
    },
    videoPlayer: {
        flex: 1,
        width: '100%',
        height: '100%',
    },
});

export default UpdatedShots;

This is my code, but this is not working. The video is not displaying on the screen