Why we cache data?

Cache means storing data inside the memory. We access data from a server by making network calls. If we trying to access the same data again and again then making a network call each time does not make any scene. That is where cache comes to help. We store data inside memory, access them from memory, which saves the user's internet data.

Coming back to the topic of this blog, If we want to play videos inside a react-native project there is an amazing library called react-native-video. This library can be used to play videos inside Android and IOS. But there is a catch, react-native-video provides caching for IOS only, not for Android. So how can we cache videos using react-native-video inside Android?

There are two ways you can cache videos

1. react-native-video-cache

Basically react-native-video-cache creates a local proxy server to play videos using the AndroidVideoCache library and when it completes caching its serves videos through cache directory. Which is perfect, that is what we want but when I test it on BrowserStack, Videos was not playing, I was getting 502 error. Which is weird because videos were playing into an actual android device. May be browser stack does not allow us to create a local proxy server. I’m not sure if anyone has any idea please comment down below.

2. react-native-fs and react-native-fetch-blob

Both libraries use file systems to download and store data. But consider this case, You have multiple videos in a list to play but we have to wait until they get download, which is frustrating also not correct to make a user wait. It's not caching while we stream them.

So How can we cache videos while streaming?

Solution

react-native-video-android-cache

The library react-native-video provides us, two players to use Android’s default player and Android ExpoPlayer. ExoPlayer does support caching videos, So why not I make the change inside ExoPlayer which react-native-video uses.

So I looked on google for caching inside ExoPlayer and found the solution on StackOverflow. So I forked react-native-video library, created a custom class that uses CacheDataSource from ExoPlayer to cache videos. Also, I had to make a change inside ReactExoplayerView class from react-native-video, where instead of returning default mediaDataSourceFactory I had to return custom class which we have created.

I have named the forked library as react-native-video-android-cache, You can use this library to cache your videos using react-native-video in Android. You can provide maximum cache size and maximum file size.

Step 1 -
npm install --save git+https://git@github.com/paddy57/react-native-video-android-cache.git

Step2

You may need to link react-native-video to your project. Follow this link (https://github.com/react-native-community/react-native-video#android-installation)

That's it. Just observe app cache size increasing while you stream videos. I hope this library will be useful to you.

If you want to read more Do visit my website. Cheers.