react_native_video_cache_control_proxy_url_quickstart.ts

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