react_native_video_cache_rh_quickstart_cached_url_playback.ts

1import React from 'react';
2import { StyleSheet, View } from 'react-native';
3import Video from 'react-native-video';
4import convertToCache, { convertToCacheAsync } from 'react-native-video-cache-rh';
5
6const App = () => {
7  const videoUrl = "https://www.w3schools.com/html/mov_bbb.mp4";
8  
9  // Synchronous conversion
10  const cachedUrl = convertToCache(videoUrl);
11
12  return (
13    <View style={styles.container}>
14      <Video
15        source={{ uri: cachedUrl }}
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 App;