react_native_video_cache_proxy_url_convert_quickstart.ts

1import React, { useEffect, useState } from 'react';
2import { StyleSheet, View } from 'react-native';
3import Video from 'react-native-video';
4import convert from 'm-react-native-video-cache';
5
6const App = () => {
7  const [videoUrl, setVideoUrl] = useState<string>('');
8  const originalUrl = "https://www.w3schools.com/html/mov_bbb.mp4";
9
10  useEffect(() => {
11    // The convert function takes the original URL and returns a local proxy URL 
12    // that enables caching for the video.
13    const cachedUrl = convert(originalUrl);
14    setVideoUrl(cachedUrl);
15  }, []);
16
17  return (
18    <View style={styles.container}>
19      {videoUrl ? (
20        <Video
21          source={{ uri: videoUrl }}
22          style={styles.video}
23          controls={true}
24          resizeMode="contain"
25        />
26      ) : null}
27    </View>
28  );
29};
30
31const styles = StyleSheet.create({
32  container: {
33    flex: 1,
34    justifyContent: 'center',
35    alignItems: 'center',
36    backgroundColor: '#000',
37  },
38  video: {
39    width: '100%',
40    height: 300,
41  },
42});
43
44export default App;