react_native_video_cache_proxy_url_wrapper_quickstart.ts

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